Less從入門到精通——變量與混合

變量（variables）

Less中採用「 @ 」定義變量，使用時直接使用「@命名符」。

  1. 作為普通變量
// 命名：
@color:red; 
// 調用：
div{
      color:@color;
}

普通用法即為變量作為屬性值時。

  1. 作為選擇器和屬性名的變量
@kuandu:width; 
.{@kuandu}{ @kuandu:150px;}

作為選擇器需要用花括號{}來包含。作為屬性名時，和屬性值的調用方法一樣。

  1. 作為URL
@myURL:" //www.baidu.com/static/images";
bg:url("@myURL/logo.png");

這樣在相同路徑下的圖片或文件就可以聲明一個URL變量，後接具體圖片/文件名，路徑不要忘記加雙引號哦~。

  1. 延遲加載
    變量不論是在調用的前面定義還是在後面定義都是一樣的，具有延遲加載的特性。
    它會在當前作用域樣式未加載之前先加載變量，而且是由內而外，先尋找作用域內的變量，如果沒有在尋找作用域外的變量。
    我們可以簡單理解為變量的提升，即解析器解析到此項為變量時，會將其全部提升到前面，以供調用。
    注意：不是提最前面哦~，而是按提升順序依次排列。即解析到的第一個變量在第一個，第二個在第二個，只是提升到調用的前面去~。
@font-size:12px;     // 第一個變量
@color:pink;	     // 第二個變量
div{
	font-size:@font-size;
}
// 下面的解析器解析後和上面的一樣，即下面的變量會解析到當前作用域的前面。
div{
	font-size:@font-size;
}
@font-size:12px;   // 第一個變量
@color:red;        // 第二個變量
  1. 定義多個相同名稱的變量時
    在定義一個變量兩次時，只會使用最後定義的變量，Less會從當前作用域向上搜索，這個行為類似於CSS定義中始終使用最後定義的屬性值（CSS層疊性）。
@font-size:12px;		    // 第一次定義
div{
	@font-size:15px;	    // 第二次定義（在div內部）
	font-size:@font-size;       // 最終結果為20px
	@font-size:20px;	    // 第三次定義（在div內部）
	// 解析：
	// 由我們的簡單理解可知，第三次的會提升到第二次的後面，調用的前面，所以第三次會把第二次的層疊掉，在當前作用域中，離調用最近的是第三次，所以會找到第三次定義的20px
}
html{
	font-size:@font-size;	// 最終結果為12px
	// 解析：
	// 在div內部定義的只會在div內部起作用，所以html會找到離它最近的第一次定義的12px
}

混合（mixins）

1. 普通混合
混合就是一種將一系列屬性從一個規則集引入（混合）到另一個規則集的方式。規則集可以理解為CSS樣式，當我們的樣式重複出現時，我們可以採用混合的方式來減少代碼冗餘。接下來先讓我們看看普通的混合吧！

.bgc{
    background-color: pink;
}
body{
    .bgc;
}
// 輸出的CSS樣式為：
.bgc{
    background-color: pink;
}
body{
    background-color: pink;
}

如果我們不想讓這個.bgc輸出到css文件中，該怎麼辦呢，接下來為你介紹~

2. 不帶輸出的混合
如果你想要創建一個混合集，但是卻不想讓它輸出到你的樣式中
在不像輸出的混合集的名字後面加上一個括號就可以實現。
我們在單純定義只是用於調用時，可以使用，我們就可以把上述代碼優化。

.bgc(){
    background-color: @color;
}
body{
    .bgc();
}
// 輸出CSS樣式為
body{
    background-color: pink;
}

3. 帶選擇器的混合
混合選擇器內的規則

.my_hover(){
    // 偽類前使用 & 詳情見 Less的嵌套規則 
    &:hover{
        color: @color;
    }
}
button{
    .my_hover(); 
}
/* 只是將裏面的CSS代碼拿過來，相當於：
button{
    &:hover{
        color: @color;
    }
}
*/
// 輸出為：
button:hover {
  color: pink;
}

4. 帶參數的混合
當屬性一致但是屬性值不一致時，我們可以通過傳參的方式改變屬性值，就可以給許許多多的選擇器重複調用啦~

.border(@border_color){
    border: 1px solid @border_color;
}
div{
    .border(pink);  // div想要粉色滴
}
p{
    .border(red);   // p也想要紅色滴
}

5. 帶參數且有默認值
在許多都是用一個屬性值時，我們可以設置默認值，這樣就可以不用傳參啦~

.border(@border_color:pink){
	border:1px solid @border_color;
}
div{
    .border();     
}

6. 帶多個參數的混合
首先我們看看什麼是多參數吧！
（1）多參數：一個組合可以帶多個參數，參數之間可以用分號或者逗號分割

  • 推薦採用分號分割，因為逗號有兩個意思，它可以解釋為mixins參數分隔符或者css列表分隔符

  • 如果傳參的括號裏面都是以逗號分割，那麼會依次傳給各個參數值

  • 如果既有括號又有分號，會將分號前面的看作一個整體作為參數

（2）定義多個具有相同名稱和參數數量的mixins是合法的，Less會使用它可以應用的屬性，如果使用mixin的時候只帶一個參數，這個屬性會導致所有的mixin都會強制使用這個明確的參數。

div{
    .div(#ccc);  // 所有的 .div里的第一個參數都賦值為 #ccc 
}
// 第一個混合
.div(@border_color){
    border:1px solid @border_color;
}
// 第二個混合
.div(@border_color;@margin:2){
    .border(@border_color);
    margin: @margin;
}
// 第三個混合
.div(@border_color;@margin;@padding:2){
    .border(@border_color);
    margin: @margin;
    padding: @padding;
}
// 由於我們只傳遞了一個參數，而第三個混合的margin值沒有默認值，也沒有得到賦值，所以無法被調用。
// 輸出為
div {
  border: 1px solid #ccc;      // 來自第一個 和第二個混合（合併輸出）
  margin: 2;                   // 來自第二個混合
}

7. 命名參數
首先我們來了解什麼是命名參數：
引用mixin時可以通過參數名稱而不是參數的位置來為mixin提供參數值，任何參數都可以通過它的名稱來引用，這樣就不必按照任意特定的順序來使用參數
這樣就不會擔心數據被亂傳嘍~

.div(@border_color;@margin:2){
    .border(1px solid @border_color);
    margin: @margin;
}
div{
    .div(@margin:3;#ccc);   // 這樣來指定第一個參數賦值給@margin變量，就不用按照原先定義的指定順序輸入啦~
}

8. @arguments變量
@arguments代表所有的可變參數，參數的先後順序就是你( )里的參數順序，值的位置和個數也是一一對應的，在你想給第一個和第三個賦值時不能直接寫(值1，，值3)，必須把原來的默認值寫上去。

.p_border(@c;@x:solid;@size:1px;){
    border: @arguments;
}
// 只給第一個沒有默認值的參數，後面會使用默認值
p{
      .p_border(red);
}
// 輸出的css文件為：
p{
      border:red solid 1px;
}
// 但如果我們將參數位置改變
.p_border(@x:solid;@size:1px;@c){
    border: @arguments;
}
// 這時像剛剛那樣調用就會報錯 因為是一一對應的 此時的red賦值給了@x，而@c沒有值
// 所以必須這樣 將默認值寫上
p{
     .p_border(solid,1px,red);
}
// 如果全部都有默認值 則可以直接調用 如：
.p_border(@c:red;@x:solid;@size:1px;){
    border: @arguments;
}
p{
    .p_border();
}

9. 匹配模式
傳值的時候定義一個字符，在使用的時候使用哪個字符，就調用哪條規則
根據不同功能定義字符，類似一個標識符，適用於相同屬性值在類似屬性中的應用，例如下例都是設置邊框圓角。

.border(all;@w:5px){
    border-radius: @w;
}
.border(t_l;@w:5px){
    border-top-left-radius: @w;
}
// 想要四個圓角就調用 all
header{
    .border(all;50%);
}
// 想要左上一個圓角就調用 t_l
header{
    .border(t_l;50%);
}
// 類似的我們還可以定義右上、左下、右下等，這樣就可以在適時調用合適的方法了

10. 得到混合變量中變量的返回值

 .average(@x;@y){
  	@average: ((@x + @y) / 2);
  }
  div{
  	.average(10;20);    // 調用進行計算
  	padding:@average;   // 得到混合變量中變量的返回值
  }
// 之所以可以得到 @average 是因為，混合是將規則集（這裡為CSS樣式表）拿過來 也就會變成如下代碼
div{
      // 調用時 進行變量賦值
      @x:10;
      @y:20;
      // 將規則集混合
      @average: ((@x + @y) / 2);
      // 這樣就是一個作用域啦~ 當然可以使用啦~
      padding:@average;
}

以上均為自己理解，若有不當，還請指出~ ^_^

Tags:

VirMach 便宜 VPS

QNews

QNews