### less的設計是盡量做到和原生的css相同,無論變量的設計還是mixin的設計 ### 1.嵌套 ```css 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.變量 優勢:可以避免寫相同的值,可以參與計算 ```css @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 ```css .gen-col(@n) when(@n>0){ .col-@{n}{ width:100%/12*@n; } .gen-col(@n - 1); } .gen-col(12); ``` ### 6.import 可以將css拆分成不同的模塊,用import去加載對應的css