less學習之Bootstrap（按鈕篇）

風研雨墨發表於2019-01-16
boot

less學習之Bootstrap按鈕篇）

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

檔案 buttons.less 與 mixins/buttons.less

內容不是很多，總結下來就是：

1、“.btn”的基礎樣式定義。

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

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

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

5、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的學習也不會停止。

相關文章