嵌套與變量
less中
@color:pink;
@m:margin;
@selector:#wrap;//變量定義，屬性，值，選擇器都可定義
@{selector}
{
width: 200px;
height: 200px;
border: 3px solid blue;
@{m}:auto;
.inner{ //嵌套 效果相當於 #wrap .inner
width: 100px;
height: 100px;
background-color: @color;
}
}
相當於css的
#wrap {
width: 200px;
height: 200px;
border: 3px solid blue;
margin: auto;
}
#wrap .inner {
width: 100px;
height: 100px;
background-color: pink;
}
變量的塊級作用域
@var:0;
.class{
@var:1;
.brass{
@var:2;
tree:@var;
@var:3;
}
grass:@var;
}
- 引用變量會從最近的作用域找起，且取得最近的作用域內最後此定義，因而tree的值爲3。
- 值得注意的是，.class括號中的brass括號對變量修改並不會作用域.class，故grass值爲1。
編譯後
.class {
grass: 1;
}
.class .brass {
tree: 3;
}
嵌套規則
.inner {
width: 100px;
height: 100px;
background-color: pink;
&:hover{
background-color: yellow;
}
}
嵌套僞類時，應在僞類前加"&",否則會出現空格使僞類無效。
此方法可用於平級嵌套，例如div.app
定義混合
.FenBeiJing() //去掉括號後會把它(構造函數)也編譯
{
background-color: pink;
}
#wrap{
.FenBeiJing;
width: 200px;
height: 200px;
.inner{
width: 100px;
height: 100px;
.FenBeiJing;
}
}
-
可通過這樣的寫法像函數一樣，定義並調用一串css代碼。
-
既然像函數就也可以帶參數，參數也可以有默認值。
.FenBeiJing(@w:pink){
background-color: @w;
}
這樣引用時沒有傳參數就會默認爲粉色。引用傳參如下
.FenBeiJing(black);
注意：當傳的參數數量沒有達到預設的數量，且沒有傳的參數又沒有預設值，是會報錯編譯失敗的。
想指定傳的參數對應哪一個時：
.FenBeiJing(@w:black);
匹配模式
.BeiJing(Fen){
background-color: pink;
}
.BeiJing(Hei){
background-color:black;
}
#wrap{
.BeiJing(Fen);
.inner{
.BeiJing(Hei);
}
}
- 函數沒有用@開頭也沒有值的參數會被用於在相同名字的函數中選擇匹配,引用時根據這種值選擇要當前函數名下的哪一個混合。
編譯後如下
#wrap { background-color: pink; } #wrap .inner { background-color: black; }
注意相同函數名下沒有匹配值的函數會被直接一起調用
arguments
這樣用
.border(@1,@2,@3){
border: @arguments;
}
.inner{
.border(1px,s0lod,black)//數量要對上
}
引用
@import “less文件地址”；
less計算
width:(100+100px);//一方帶單位即可
less繼承
避免編譯
想要一段代碼不被less編譯，用~" "套住內容即可
height: ~"(100+100px)";
個人測試只能套值，而不能用於屬性