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;
}
04-16 07:05