LESS詳解之變數

變數基本上是每個語言指令碼上都會涉及的乙個小小知識點，是學好語言指令碼的必經之路。less中也可以設定變數，然後通過變數可以改變整個**的設計風格。良好的掌握less中變數的用法，是less的基礎。

使用方法就是在「@」後新增變數名稱然後與變數值用冒號「:」鏈結。如下

less**

@width : 300px;
.meng

編譯後的css**

.meng

如果對同乙個變數定義兩次的話，在當前作用域中最後一次定義的將被使用。這與css的機制類似，最後一次定義的值會成為這個屬性的值。若定義在巢狀之中，那麼這個變數就只能服務於這個巢狀之內的屬性了。變數也是沒有順序可言的，只要頁面裡有，都會按順序覆蓋，按順序載入。如下

less**

@width : 1px;
.meng 
width: @width;
}

編譯後的css**

.meng

.meng .long

下面這段例子也是有效的。

less**

.long 
@w: @o;
@o: 100%;

編譯後的css**

.long

變數可以用像 @ 這樣的結構，以類似 ruby 和 php 的方式嵌入到字串中

less**

@myurl: "";
.meng /images/bg.png");
}

編譯後的css**

.meng

如果需要在選擇器中使用 less 變數，只需通過使用和字串外掛程式一樣的 @ 即可。

less**

@myname: meng1314;
.@

編譯後的css**

.meng1314

如果你希望在media query中使用less變數，你可以直接使用普通的變數方式。因為「~」後面的值是不被編譯的，所以可以用作media query的引數。小例子如下

less**

@singlequery: ~"(max-width: 480px)";
@media screen, @singlequery 
}

編譯後的css**

@media screen, (max-width: 480px) 
}

在定義變數值時使用其它的變數。

less**

@meng : 5201314px;
@loveday : meng;
div

編譯後的css**

div

less詳解之變數(@)就為大家介紹到這裡了。這並不是最完善的有關less的講解，也不是最完美的講解，只是把我學習的筆記和大家分享一下，希望能對大家有所幫助。掌握好less詳解之變數(@)，也是為之後less深入學習打好基礎。