Less的用法
阿新 • • 發佈:2017-06-24
主題 src text cor ade tex 簡單實現 -s 分享
開始使用less
完成了以上工作之後,我們終於開始要進入主題啦,下面能我就只是講講基本的使用,詳細的使用大家還是去看官網的吧,畢竟寫起來太長了,很耗費時間呢。
變量:[email protected]:值;的方式的
@bgColor:#0094ff; @color:#fff; .demo{ background-color:@bgColor; color:@color; }
生成的css代碼:
.demo { background-color: #0094ff; color: #ffffff; }
混合式寫法:
混合可以將一個定義好的class A輕松的引入到另一個class B中,從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用,就像使用函數一樣。
/*less*/ @bgColor:#0094ff; @color:#fff; .demo{ background-color:@bgColor; color:@color; } .header{ border:1px solid #ededed; .demo; } /*輸出的css*/ .demo { background-color: #0094ff; color: #ffffff; } .header { border: 1px solid #ededed; background-color: #0094ff; color: #ffffff; }
嵌套式寫法:
我們可以在一個選擇器中嵌套另一個選擇器來實現繼承,這樣很大程度減少了代碼量,並且代碼看起來更加的清晰。
/*less寫法*/ @bgColor:#0094ff; @color:#fff; .demo{ background-color:@bgColor; color:@color; } header{ border:1px solid #ededed; .demo; h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } /*輸出的css*/ .demo { background-color: #0094ff; color: #ffffff; } header { border: 1px solid #ededed; background-color: #0094ff; color: #ffffff; } header h1 { font-size: 26px; font-weight: bold; } header p { font-size: 12px; } header p a { text-decoration: none; } header p a:hover { border-width: 1px; }
函數 & 運算
運算提供了加,減,乘,除操作;我們可以做屬性值和顏色的運算,這樣就可以實現屬性值之間的復雜關系。LESS中的函數一一映射了JavaScript代碼,如果你願意的話可以操作屬性值。
/*less*/ @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); } /*css部分*/ #header { color: #333333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; }
Less的用法