1.LESSCSS是一種動態樣式語言,屬於CSS預處理語言的一種,它使用類似CSS的語法,為CSS的賦予了動態語言的特性,如變數、繼承、運算、函數等,更方便CSS的編寫與維護。
LESSCSS可以在多種語言、環境中使用,包括瀏覽器端、桌面用戶端、服務端。
Koala 無尾熊--編譯的時候如果沒有建CSS資料夾Koala會自動給你產生一個
如何設定語言
如何編譯
-
讓webstorm支援less編譯:
#.....
@ly_width:100px; .box { width:@ly_width; }
.box { width:100px; }
.border_radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; }
@ly_width:100px; @ly_height:200px; @ly_color:green; .border(@border_width:3px;) { border:@border_width solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border(); }
.one { width: 100px; height: 200px; background-color: #008000; border: 3px solid #ff0000; }
@ly_width:100px; @ly_height:200px; @ly_color:green; .border(@border_width) { border:@border_width solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border(1px); }
.one { width: 100px; height: 200px; background-color: #008000; border: 1px solid #ff0000; }
@ly_width:100px; @ly_height:200px; @ly_color:green; .border { border:1px solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; }
@ly_width:100px; @ly_height:200px; @ly_color:green; .border { border:1px solid red; } .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .border; }
.border { border:1px solid red ; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }
帶參數的混合---不帶預設值(可以傳多個參數,以逗號或分號隔開,推薦用分號下面以一個參數為例)
//定义上,下,左,右边框的样式 .border(top;@border_width:5px;@border_color:red){ border-top:@border_width solid @border_color; } .border(bottom;@border_width:5px;@border_color:red){ border-bottom:@border_width solid @border_color; } .border(left;@border_width:5px;@border_color:red){ border-left:@border_width solid @border_color; } .border(right;@border_width:5px;@border_color:red){ border-right:@border_width solid @border_color; } //如果想写通用的样式 可以在下面的代码中写 格式是固定的 .border(@_,@border_width:5px;@border_color:red){ border-color:yellow; } .border_use1 { //选择和if差不多 如果是left就调用上面对应的 .border(left); } .border_use2 { //选择和if差不多 如果是right就调用上面对应的 .border(right); }
.border_use1 { border-left:5px solid #ff0000; border-color:yellow; } .border_use2 { border-right:5px solid #ff0000; border-color:yellow; }
@ly_width:100px; .one { width:@ly_widht + 100; }
.one { width:200px; }
<p class="one"> <p class="two"></p> </p>
@ly_width:100px; @ly_height:200px; @ly_color:red; .one { width:@ly_width; height:@ly_height; background-color:@ly_color; .two { background-color: green; } }
.one { width: 100px; height: 200px; background-color: #ff0000; } .one .two { background-color: green; }
//和前面提到的混合一起举个栗子 .border(@border_width;@border_style;@border_color){ border:@arguments; } .one { .border(1px;solid;red); }
.one { border:1px solid #ff0000; }
以上是使用less(變數,混合,匹配,運算,嵌套)的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!