less學習筆記【變量部分】

20世紀30年代著名的建築師路德維希·密斯·凡德羅曾說過：“less is more”，簡單的東西往往帶給人們的是更多的享受。著名js庫jquery也曾用“write less, do more”為口號，以其平緩的學習曲線，吸引了一大批的使用者。用更少的成本完成更多的工作是人們一直所最求的，less也是如此，作為一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。

接下來我將參考less官方網站，復習一下相關的less的語言特性。

變量

變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。

（1）設置選擇器：

// 變量
@my-selector: banner;

// 使用
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

//編譯后
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

（2）設置URLs：

// 變量
@images: "../img";

// 使用
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

（3）import聲明

// 變量
@themes: "../../src/themes";

// 使用
@import "@{themes}/tidal-wave.less";

（4）特性（properties）

//變量使用
@property: color;

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

（5）變量嵌套（用變量聲明變量）

//使用
@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;
//編譯后
content: "I am fnord.";

（6）惰性加載

//使用
.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

.lazy-eval-scope {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;

//兩者編譯后皆為
.lazy-eval-scope {
  width: 9%;
}

當重復定義一個變量時，變量值采用最后一個定義，若當前作用域不存在詞變量則向上級作用域查找，這點跟原生css是一樣的，例如：

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}
//編譯后
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

（7）默認變量

// less文件
@base-color: green;
@dark-color: darken(@base-color, 10%);

// 使用
@import "library.less";
@base-color: red;

有時我們需要設置一些變量的默認值，然后導入less文件就可直接使用變量。默認變量的值很容易就會被覆蓋，遵從css語法。

嗨呀，吃飯去回來寫extends部分。