Less 變量

概念

使用 @ 符號定義變量，變量分配使用 : 完成。

聲明格式：@變量名：變量值。

一般看到不少重複的相同的值，咱們能夠經過使用變量來避免。

Less中的變量和其餘編程語言同樣，能夠實現值的複用，一樣的它也有做用域，簡單的來講就是變量的做用域就是局部變量和全局變量的概念；變量做用域採用的是就近原則，也就是說咱們須要先查找本身自己是否有這個變量，若是有就使用自身變量，沒有的話就查找上一級父元素，以此類推。

可變插值

• 選擇器名插值（能夠引用任何變量）
• 屬性名插值（能夠引用任何變量）
• URL插值（用來保存URL，並在url()中使用它）
• import 插值（import語句中，用來保存路徑的變量）
• 媒體查詢插值

導入語句

版本：1.4.0

句法： @import "@{themes}/tidal-wave.less";

注意：在v2.0.0以前，咱們僅考慮在根範圍或者當前範圍內聲明的變量，而且在查找變量時僅考慮當前文件和調用文件。

// 變量
    @themes: "../../src/themes";
    
    // 用法
    @import "@{themes}/tidal-wave.less";

屬性

版本：1.6.0

@property: color;
    
    .widget {
      @{property}: #0ee;
      background-@{property}: #999;
    }
    
    // 編譯爲
    .widget{
        color: #0ee;
        background: #999;
    }

變量名

可使用變量名稱定義變量。

@fnord:  "I am fnord.";
    @var:    "fnord";
    content: @@var;
    
    // 編譯爲
    content: "I am fnord.";

延遲加載

變量是延遲加載的，無需在使用前聲明。

.lazy-eval-scope {
      width: @var;
      @a: 9%;
    }
    
    @var: @a;
    @a: 100%;
    
    // 編譯爲
    .lazy-eval-scope {
      width: 9%;
    }

默認變量

有時候咱們會請求默認變量：一種僅在還沒有設置變量的狀況下才能夠設置的功能，不須要這個功能是由於咱們能夠經過在後面放置定義來輕鬆覆蓋變量。