摘要：學(xué)習(xí)之按鈕篇如我上一篇學(xué)習(xí)之里面，介紹了的目錄結(jié)構(gòu)，說明了在這個(gè)文件里面，定義了主題色，也包括了按鈕的主題色。偽連接，按鈕的樣式顯示為連接的樣式。接下來的安排，自己寫的文章自己也會(huì)去實(shí)現(xiàn)它，另外關(guān)于的學(xué)習(xí)也不會(huì)停止。

如我上一篇less學(xué)習(xí)之Bootstrap里面，介紹了Bootstrap的目錄結(jié)構(gòu)，說明了在variables.less這個(gè)文件里面，定義了主題色，也包括了按鈕的主題色。接下來看一看 buttons.less與 mixins/buttons.less.

內(nèi)容不是很多，總結(jié)下來就是：

1、“.btn”的基礎(chǔ)樣式定義。

2、按鈕的各種狀態(tài)含義的樣式定義，例如：btn-primary、btn-success等。

3、偽連接，按鈕的樣式顯示為連接的樣式。

4、按鈕尺寸的class：lg、sm、xs。

5、input類型的按鈕定義。

.btn {
  display: inline-block;
  ...
  ...

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      .tab-focus();
    }
  }

 ...
 ...// 余下的為hover、disabled時(shí)的樣式
}

知識(shí)點(diǎn)1：`&`在less與scss的語法中，表示同父級(jí)，就上一個(gè)例子來說，就是編譯之后`&`將會(huì)被`.btn`替換，如果是多層時(shí)也是相同的道理。

提示1：運(yùn)用了函數(shù)tab-focus。此函數(shù)定義在mixins/tab-focus.less中，代碼很短

.tab-focus() {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

修改瀏覽器默認(rèn)的大綱樣式：表現(xiàn)在按鈕、form表單等原生組件上。

提示2：    運(yùn)用了函數(shù)user-select。此函數(shù)定義在mixins/vendor-prefixes中。

.user-select(@select) {
  -webkit-user-select: @select;
 -moz-user-select: @select;
  -ms-user-select: @select; // IE10+
      user-select: @select;
}

作用，讓文本是否能夠選擇。

提示3： 運(yùn)用了函數(shù)opacity。此函數(shù)定義在mixins/opacity中。

.opacity(@opacity) {
  opacity: @opacity;
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

此處做了IE的兼容IE，IE的透明度采用 filtger:alpha(opacity=value),其中 0 <= value && value <= 100.
符號(hào)“~”，可以意為JavaScript里面的 evel ，可以將字符串轉(zhuǎn)化為表達(dá)式。所以說一些復(fù)雜的選擇器也能夠作為變量定義。

函數(shù)button-variant

Bootstrap里面抽象出來的函數(shù)，作用于按鈕不同狀態(tài)下的顏色變化。例如：hover、focus、active等狀態(tài)。

函數(shù)說明

參數(shù)：@color; @background; @border // 分別時(shí)字體顏色、背景顏色、邊框顏色

結(jié)構(gòu)如下：

.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:focus,
  &.focus {
    color: @color;
    background-color: darken(@background, 10%);
        border-color: darken(@border, 25%);
  }
  
 ...
 ...// 余下的為hover、disabled時(shí)的樣式

  .badge {
    color: @background;
    background-color: @color;
  }
}

由上面兩個(gè)文件可以總結(jié)出的結(jié)論是：.less里面寫的是選擇器定義、變量定義，而mixins/.less里面寫的是函數(shù)。

關(guān)于Bootstrap聽到過不少的見聞，有好有壞，我有身邊也有人說這個(gè)框架很垃圾。但是對(duì)于Bootstrap這個(gè)框架怎么樣，我不做評(píng)價(jià)，但是Bootstrap用來作為學(xué)習(xí)的資料時(shí)非常合適的，Less的語法糖都了知道，那么如何才能讓Less用起來得心應(yīng)手？無疑，源碼是一種途徑。

接下來的安排，自己寫的文章自己也會(huì)去實(shí)現(xiàn)它，另外關(guān)于Less的學(xué)習(xí)也不會(huì)停止。