less語法心得

1 Mix混合

---

1.1 設置通用屬性集合做爲一個樣式類

這種方式一般適用於一些基礎樣式類，自身能夠被單獨使用，也能夠做爲其餘樣式類的一部分。示例：

.bordered {
  border: solid 1px #aeaeae;
}
input {
  padding: 5px;
  margin: 5px;
  .bordered;
}
button {
  padding: 5px 10px;
  margin: 5px;
  .bordered;
}

這樣，能夠最大可能的複用樣式。

1.2 帶參數混合樣式集合

這種混合方式，相似於函數，自身不能做爲獨立的樣式類使用，只在被調用的地方生效。示例：

@primaryCol: #51ca7a;
.border-radius (@radius: 5px) {
  border-radius: @radius;
}
.bg-color (@bgColor: #fff) {
  background-color: @bgColor;
}
.input {
  .border-radius;
  .bg-color;
}
.button {
  .border-radius(8px);
  .bg-color;
}

並且這種函數式混合方式，還能夠設置默認參數值。這種混合方式特別適合咱們須要個性化定製組件的皮膚，以便提供不一樣的可選方式，知足不一樣的業務場景。

1.3.1 @arguments 變量

提到函數式混合方式，不得不提到 @arguments 變量，相似於 ES5 的 arguments 哦，這樣好多變量時就不須要一一書寫啦。示例：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #efefef) {
  box-shadow: @arguments;
}
.box {
  padding: 10px 15px;
  margin: 20px;
  .bordered;
  .box-shadow(4px, 4px, 4px, #bebebe);
}

1.3 模式匹配混合方式

這種方式是對 1.2 方式的一種擴展。1.2 中參數都是變量，而這裏的模式匹配則是將某些變量固定下來，即將變量變爲常量。換就話說，就是隻有當參數是對應的常量才能匹配對應模式。以下：

@dft: 'dft';
@fill: 'fill';
@dftCol: #fff;
@warnCol: #f78253;
.button-theme('dft') {
  .bg-color(@dftCol);
  color: darken(@dftCol, 60%);
}
.button-theme('dft', @color) {
  .bg-color(@dftCol);
  color: @color;
}
.button-theme('fill', @bgColor) {
  .bg-color(@bgColor);
  color: lighten(@bgColor, 60%); 
}
.button-theme(@_, @color) {
  border-color: @color;
}

.input.active {
  .button-theme(@fill, @primaryCol);
}
.button.active {
  .button-theme(@fill, @primaryCol);
}
.button-default {
  .button-theme(@dft);
}
.button-primary {
  .button-theme(@dft, @primaryCol);
  &.fill {
    .button-theme(@fill, @primaryCol);
  }
}
.button-warn {
  .button-theme(@dft, @warnCol);
  &.fill {
    .button-theme(@fill, @warnCol);
  }
}

上面咱們定義了四種 .button-theme 模式：

• 第一種只有一個參數，且是一個常量 dft ，使用默認的背景和字體顏色；
• 第二種模式是加強第一種模式，第一個參數是常量 dft ，使用第二個參數來變動字體顏色，但背景還是默認背景；
• 第三種模式是填充模式，第一個參數是常量 fill ，使用第二個參數來變動背景顏色，同時字體顏色使用函數 lighten 進行對應設置；
• 第四種模式是補充模式，第一個參數接收任意參數，使用第二個參數來設置邊框的顏色；

所以，.button-default 中，樣式 .button-theme(@dft); 只有一個參數，將只會匹配第一種模式；.button-primary 中，樣式 .button-theme(@dft, @primaryCol); 有兩個參數，將會匹配第二種模式和第四種模式；.button-primary.fill 中，樣式 .button-theme(@fill, @primaryCol); 將會匹配第三種模式和第四種模式。最終渲染結果是：

.button-default {
  background-color: #fff;
  color: #666666;
}
.button-primary {
  background-color: #fff;
  color: #51ca7a;
  border-color: #51ca7a;
}
.button-primary.fill {
  background-color: #51ca7a;
  color: #ffffff;
  border-color: #51ca7a;
}

下圖爲上述代碼的實例，代碼詳情及效果，請戳這裏 less-mix！

【未完待續】