less學習之Bootstrap（按鈕篇）

less學習之Bootstrap按鈕篇）

如我上一篇less學習之Bootstrap裏面，介紹了Bootstrap的目錄結構，說明了在variables.less這個文件裏面，定義了主題色，也包括了按鈕的主題色。接下來看一看 buttons.less與 mixins/buttons.less.

文件 buttons.less 與 mixins/buttons.less

內容不是不少，總結下來就是：

一、「.btn」的基礎樣式定義。

二、按鈕的各類狀態含義的樣式定義，例如：btn-primary、btn-success等。

三、僞鏈接，按鈕的樣式顯示爲鏈接的樣式。

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

五、input類型的按鈕定義。

基礎樣式定義

代碼：

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

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

 ...
 ...// 餘下的爲hover、disabled時的樣式
}

說明：

知識點1：`&`在less與scss的語法中，表示同父級，就上一個例子來講，就是編譯以後`&`將會被`.btn`替換，若是是多層時也是相同的道理。

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

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

修改瀏覽器默認的大綱樣式：表如今按鈕、form表單等原生組件上。

提示2：    運用了函數user-select。此函數定義在mixins/vendor-prefixes中。

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

做用，讓文本是否可以選擇。

提示3： 運用了函數opacity。此函數定義在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.
符號「~」，能夠意爲JavaScript裏面的 evel ，能夠將字符串轉化爲表達式。因此說一些複雜的選擇器也可以做爲變量定義。

特別說明

函數button-variant

Bootstrap裏面抽象出來的函數，做用於按鈕不一樣狀態下的顏色變化。例如：hover、focus、active等狀態。

函數說明

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

結構以下：

.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時的樣式

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

由上面兩個文件能夠總結出的結論是：.less裏面寫的是選擇器定義、變量定義，而mixins/.less裏面寫的是函數。

本篇總結

關於Bootstrap聽到過很多的見聞，有好有壞，我有身邊也有人說這個框架很垃圾。可是對於Bootstrap這個框架怎麼樣，我不作評價，可是Bootstrap用來做爲學習的資料時很是合適的，Less的語法糖都了知道，那麼如何才能讓Less用起來駕輕就熟？無疑，源碼是一種途徑。

接下來的安排，本身寫的文章本身也會去實現它，另外關於Less的學習也不會中止。