[TOC]
### less的設計是盡量做到和原生的css相同,無論變量的設計還是mixin的設計
### 1.嵌套
~~~
div{
background:red;
.content{
width:100px;
height:100px;
//&表示.content 同時的意義
&:hover{
height:200px;
}
}
}
~~~
~~~
//編譯為
div {
background: "red";
}
div .content {
width: 100px;
height: 100px;
}
div .content:hover {
height: 200px;
}
~~~
### 2.變量
優勢:可以避免寫相同的值,可以參與計算
~~~
@fontSize:12px;
@bgColor:red;
div{
background:lighten(@bgColor,40%);
fontsize:@fontSize+2px;
}
~~~
實際開始可以將一些常用的樣式先定義好 eg:
~~~
@headFontSize:16px;
@contentFs:14px;
@textColor:#333;
@linkColor:yellow;
~~~
### 3.mixin ——大段代碼復用
~~~
@fontSize:12px;
//定義一段復用的代碼
.font(@fontSize){
border:1px solid red;
font-size: @fontSize;
}
.box{width:100px;}
.nav{
//調用
.box();
.font(14px);
}
~~~
### 4.extend
~~~
.block{
border:1px solid red;
width:100px;
height:100px;
}
//第一種方式
.box:extend(.block){};
//第二種方式
.content{
&:extend(.block);
}
~~~
### 5.loop
~~~
.gen-col(@n) when(@n>0){
.col-@{n}{
width:100%/12*@n;
}
.gen-col(@n - 1);
}
.gen-col(12);
.widths(@i) when(@i > 0) {
.col-xs-@{i} {
width: (100%/12 * @i);
}
.col-xs-offset-@{i} {
margin-left: 100%/12 * @i;
}
@widths .widths((@i - 1));
}
@widths .widths(12);
~~~
### 6.import
可以將css拆分成不同的模塊,用import去加載對應的css
