less备忘
//这是一个运行在koala中的less文件，//注释不会被编译到css文件中，/**/注释会 ****************by 李可 2016/04/19
/*所有，所有伪类*/
*,*:after,*:before{
margin: 0;
padding: 0;
};
/*2种盒子类型，*/
.divouter{
box-sizing:border-box;//写width会把margin算进去
//box-sizing:content-box;//默认
}
/*****************************************变量(值) 层级关系(嵌套)*************************************************/
@a:20px;
.divouter{
width:@a;
.divinner
{
width:@a;
}
.divinner2
{
width: 300px;
}
}
/*********************************************混合（多个属性的集合）**********************************************/
.border-radius{
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}
#divmix{
.border-radius;
//.border-radius()
}
/***********************************命名空间（多个模块）,每个模块就是将变量，混合弄成一个块。*******************************/
/*变量或者混合夹杂着层级*/
#namespaceLi{
.button{// 按钮模块 将一些变量和嵌套组合成一个个的小模块，外面调用具体模块的时候，这个模块的所有变量值和&和层级嵌套就会对应的
border-radius:1px;
&-primary{
background:gray;
&:hover{
background:red;
}
}
&:hover{
background:blue;
}
}
.tree{
height:800px;
&:hover{
background:red;
}
}
.accrdtion{
height:800px;
&:hover{
background:red;
}
}
}
/*使用：命名空间名 >模块名*/
#divoop1{//调用命名空间 > 模块名，（结果和命名空间 > 模块名字没关系哦）：会自动将自己的选择器名传进去，生成自己的
#namespaceLi .button
}
#divoop2{
#namespaceLi > .button
}
/**************************************运算+ - * / 数字，颜色，变量值都可以*************************************************/
@temp:30px;
@left:@a+50;
.calcdiv{
color:#999/3;
background-color:1/3; /* background-color: 0.3333333333333333;*/
height:200+50;
width:200px+50; /* width: 250px一个带单位，一个不带;*/
position:relative;
left:@left;
}
/*******************************方法(相同属性，不同属性值，就像一个方法，封装多个属性，供外部调用)************************/
.div(@w:200px,@h:200px){//默认属性值
width:@w;
height:@h
}
#div2{
.div(400px,300px)
}
#div3{
.div
}
#div4{
.div()
}
/************************************层级（嵌套）+拼接选择器(&拼接符号)************************************/
.divouter{
width:200px;
.divouter8{
background:red;
}
&-header{
width:300px;
}
&-slideBar{
.div(200px,800px)
}
&-body{
.div(600px,300px)
}
&:hover{
backgroud:red;
}
}
/************************************************清楚浮动***********************************************************/
.clearfix:after{
content:"";
width: 0;
height: 0;
display: block;
}
.clearfix{
zoom:1;
}
生成CSS
/*所有，所有伪类*/
*,
*:after,
*:before {
margin: 0;
padding: 0;
}
/*2种盒子类型，*/
.divouter {
box-sizing: border-box;
}
/*****************************************变量(值) 层级关系(嵌套)*************************************************/
.divouter {
width: 20px;
}
.divouter .divinner {
width: 20px;
}
.divouter .divinner2 {
width: 300px;
}
/*********************************************混合（多个属性的集合）**********************************************/
.border-radius {
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#divmix {
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
/***********************************命名空间（多个模块）,每个模块就是将变量，混合弄成一个块。*******************************/
/*变量或者混合夹杂着层级*/
#namespaceLi .button {
border-radius: 1px;
}
#namespaceLi .button-primary {
background: gray;
}
#namespaceLi .button-primary:hover {
background: red;
}
#namespaceLi .button:hover {
background: blue;
}
#namespaceLi .tree {
height: 800px;
}
#namespaceLi .tree:hover {
background: red;
}
#namespaceLi .accrdtion {
height: 800px;
}
#namespaceLi .accrdtion:hover {
background: red;
}
/*使用：命名空间名 >模块名*/
#divoop1 {
border-radius: 1px;
}
#divoop1-primary {
background: gray;
}
#divoop1-primary:hover {
background: red;
}
#divoop1:hover {
background: blue;
}
#divoop2 {
border-radius: 1px;
}
#divoop2-primary {
background: gray;
}
#divoop2-primary:hover {
background: red;
}
#divoop2:hover {
background: blue;
}
/**************************************运算+ - * / 数字，颜色，变量值都可以*************************************************/
.calcdiv {
color: #333333;
background-color: 0.3333333333333333;
/* background-color: 0.3333333333333333;*/
height: 250;
width: 250px;
/* width: 250px一个带单位，一个不带;*/
position: relative;
left: 70px;
}
/*******************************方法(相同属性，不同属性值，就像一个方法，封装多个属性，供外部调用)************************/
#div2 {
width: 400px;
height: 300px;
}
#div3 {
width: 200px;
height: 200px;
}
#div4 {
width: 200px;
height: 200px;
}
/************************************层级（嵌套）+拼接选择器(&拼接符号)************************************/
.divouter {
width: 200px;
}
.divouter .divouter8 {
background: red;
}
.divouter-header {
width: 300px;
}
.divouter-slideBar {
width: 200px;
height: 800px;
}
.divouter-body {
width: 600px;
height: 300px;
}
.divouter:hover {
backgroud: red;
}
/************************************************清楚浮动***********************************************************/
.clearfix:after {
content: "";
width: 0;
height: 0;
display: block;
}
.clearfix {
zoom: 1;
}