Less語言特性

Less GitHub

Variables（變量）

在你的樣式表中相同的值重複幾十次 甚至上百次 並很多見，變量經過爲你提供一種在一個地方管理這些值的方法讓你的代碼變得更容易維護。

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

//做爲屬性名
@mySelector: banner;
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

// 做爲URL
@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

// 做爲import引入
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";

// 做爲屬性
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

// 做爲變量
@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;
複製代碼

因爲變量只能定義一次，實際上也至關於常量。

變量是延遲加載的，在使用前不必定要預先聲明。

同名變量後面的會覆蓋前面的。

Extend（拓展）

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}
複製代碼

輸出：

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}
複製代碼

extend能夠附加給一個選擇器，也能夠放入一個規則集中。它看起來像是一個帶選擇器參數僞類，也可使用關鍵字all選擇相鄰的選擇器。

.a:extend(.b) {}

// 上面的代碼塊與下面這個作同樣的事情
.a {
  &:extend(.b);
}


.c:extend(.d all) {
  // 擴展".d"的全部實例，好比".x.d"或者".d.x"
}
.c:extend(.d) {
  // 擴展選擇器編譯爲".d"的惟一實例
}

.e:extend(.f) {}
.e:extend(.g) {}

// 上面的代碼與下面的作同樣的事情
.e:extend(.f, .g) {}
複製代碼

若是你想有一個animal子類型，而且要重寫背景顏色。那麼你有兩個選擇：

1.首先改變你的HTML
<a class="animal bear">Bear</a>

.animal {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}

2.簡化你的HTML
<a class="bear">Bear</a>

.animal {
  background-color: black;
  color: white;
}
.bear {
  &:extend(.animal);
  background-color: brown;
}
複製代碼

Mixins會複製全部的屬性到選擇器中，這可能致使沒必要要的重複。所以你可使用extend來代替mixin將你要用的屬性移過去，這樣就會生成更少的CSS。

.my-inline-block() {
    display: inline-block;
  font-size: 0;
}
.thing1 {
  .my-inline-block;
}
.thing2 {
  .my-inline-block;
}
// 編譯爲：
.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}

// 或者
.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}
// 編譯爲：
.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}
複製代碼

Mixins（混入）

從現有的樣式混合（mixin）屬性。

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}
// 編譯爲：
.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}
複製代碼

若是你想要建立一個混合集，可是卻不想讓它輸出到你的樣式中，你能夠在混合集的名字後面加上一個括號。

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}
// 編譯爲：
.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}
複製代碼

混合集不只能夠包含各類屬性，並且能夠包括各類選擇器。

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}
// 編譯爲：
button:hover {
  border: 1px solid red;
}                                 

複製代碼

若是你想要將屬性混合到比較複雜的選擇器中，你能夠經過嵌套多層id或者class。

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;
}
// 下面四種寫法效果是同樣的
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();

複製代碼

在調用的混合集後面追加 !important 關鍵字，可使混合集裏面的全部屬性都繼承 !important

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}
// 編譯爲：
.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

複製代碼

mixinx參數

mixins也能夠接受參數，在它進行mix in操做時會將變量傳遞給選擇器代碼塊。

// 好比：
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
// 用法
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}
// 對於這些進行mixin操做的參數也能夠有默認值
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

複製代碼

多個參數的mixins

參數能夠用分號或者逗號分割。可是推薦使用分號分割。由於逗號符號有兩個意思：它能夠解釋爲mixins參數分隔符或者css列表分隔符。

定義多個具備相同名稱和參數數量的mixins是合法的

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}
// 編譯爲：
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

複製代碼

引用mixin時能夠經過參數名稱而不是參數的位置來爲mixin提供參數值。任何參數都已經過它的名稱來引用，這樣就沒必要按照任意特定的順序來使用參數：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
// 編譯爲：
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

複製代碼

arguments 變量

@arguments在mixins內部有特殊意義，調用mixin時，它包含全部傳入的參數。若是你不想單個單個的處理參數，這一特性是頗有用的：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}
編譯爲：
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

複製代碼

rest變量

若是你但願你的mixin接受數量不定的參數，你可使用...。在變量名後面使用它，它會將這些參數分配給變量。

.mixin(...) {        // matches 0-N arguments
.mixin() {           // matches exactly 0 arguments
.mixin(@a: 1) {      // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) {    // matches 1-N arguments
.mixin(@a; @rest...) {
   // @rest is bound to arguments after @a
   // @arguments is bound to all arguments
}

複製代碼

模式匹配

有時候，你可能想要基於你傳遞給它的參數改變mixin的行爲。先來看一些基礎的示例：

.mixin(@s; @color) { ... }

.class {
  .mixin(@switch; #888);
}

// 比方說你想要.mixin基於@switch的值以不一樣的方式表現，你可這樣定義這個mixin
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}


@switch: light;
.class {
  .mixin(@switch; #888);
}

// 編譯爲：
.class {
  color: #a2a2a2;
  display: block;
}

複製代碼

你也能夠基於參數數量來匹配，這裏有個例子：

.mixin(@a) {
  color: @a;
}
.mixin(@a; @b) {
  color: fade(@a; @b);
}

複製代碼

Mixins as Functions （做爲函數使用的混合）

全部定義在一個mixin中的變量都是可見的，還能夠用於調用它的做用域中（除非調用它的做用域定義了同名變量）。

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

// 編譯爲：
.caller {
  width:  100%;
  height: 200px;
}

複製代碼

所以定義在mixin中的變量還能夠充當它的返回值。這樣就容許咱們建立一個用起來相似函數的mixin。

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

// 編譯爲：
div {
  padding: 33px;
}

複製代碼

直接定義在調用者做用域內的變量不能被重寫。然而，定義在變量調用者父級做用域內的變量是否是受保護的，將被重寫：

.mixin() {
  @size: in-mixin; 
  @definedOnlyInMixin: in-mixin;
}

.class {
  margin: @size @definedOnlyInMixin;
  .mixin(); 
}

@size: globaly-defined-value; // 調用者父級做用域 - 不受保護

// 編譯爲：
.class {
  margin: in-mixin in-mixin;
}

複製代碼

定義在mixin中的mixin一樣能夠做爲返回值：

.unlock(@value) { // 外層的 mixin
  .doSomething() { // 被嵌套的 mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //嵌套混入被複制到這裏，並可用
}

// 編譯爲：
#namespace {
  declaration: 5;
}

複製代碼

Import Directives（導入準則）

從其餘樣式表中導入樣式。

在標準的CSS中，@import必須在全部其餘類型的規則以前。可是Less.js不在意你把@import語句放在什麼位置。

.foo {
  background: #900;
}
@import "this-is-valid.less";

複製代碼

Import Options （導入選項）

Less提供了一系列的CSS擴展來讓你使用@import更靈活的導入第三方CSS文件。

語法：@import (keyword) "filename";

• reference：使用Less文件但不輸出
• inline：在輸出中包含源文件但不加工它
• less：將文件做爲Less文件對象，不管是什麼文件擴展名
• css：將文件做爲CSS文件對象，不管是什麼文件擴展名
• once：只包含文件一次（默認行爲）
• multiple：包含文件屢次