技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-2.sass工具的變量

上篇文章我們學習了如何在node + vue中安裝sass工具，并對 嵌套 (nested rules) 功能做出了示範，本篇文章我們對sass工具的另一大功能 變量(variables) 進行學習和使用。

1.為什麼使用變量(variables)功能

設計師在整個頁面的視覺設計工作中，會根據網站特性、産品功能、企業文化等特點對頁面進行一個色彩的基礎定位，每個成功的網站設計都會有其确定的主色、輔助色和點綴色等。同樣的，一個網站中的字型同樣影響着一個網站的整體視覺。

當我們在全局對一個顔色、字型進行變量的定義，并且在頁面中使用該變量顔色後，在後期顔色、字型的調整中會變得友善且嚴謹，不需要在每個頁面查找需要修改的顔色和字型，也不用擔心少改了哪個部分。

2.定義顔色變量

通過鍵值對形式對顔色變量進行定義，格式與數組相同，但文法符号有差異。其中$color中的變量名可以不加引号，由于黑色白色等與後面定義的顔色有沖突容易引起錯誤，是以一般都用引号引起避免鍵值對與定義顔色字段的沖突（如 white: white, 就容易引發沖突，是以我們常用 "white": white, 來定義）。

3.使用顔色變量

顔色我們已經定義好了，該如何使用呢？并不是直接在前端元件中引入這個sass變量，而是将我們定義的變量進行周遊，其邏輯是用少量的代碼生成大量我們需要的樣式。

// colors常用顔色
$colors: (
    // 主色
    "primary": #a80506,
    // 輔色
    "auxiliary": #054ea8,
    // 點綴色
    "Embellishment":#db9e3f,

    // 白色
    "white": #fff,
    // 黑色
    "black": #000,
    // 灰色
    "gray": #777,
);
// 從$colors變量中找到 $colorKey 鍵值，再找到 $color 色值，進行周遊。
// 在class名中使用變量需要用 "#{}" 方法，而色值中使用直接使用變量即可。
@each $colorKey, $color in $colors {
    // 文字顔色
    .text-#{$colorKey} {
        color: $color;
    }
    // 背景顔色
    .bg-#{$colorKey} {
        background: $color;
    }
}           

此時我們進入web端，檢視一下生成的顔色。

cd web 
npm run serve            

此時，我們定義的顔色就以類名的形式生成了css代碼，我們可以随時使用。

4.使用直接量定義類名

同樣使用周遊方法生成css類名，但某些時候我們沒有必要為了幾個值定義一個變量，例如文本的左中右對其。

普通css中，我們需要編寫css：

text-left{
    text-align: left;
}
text-right{
    text-align: right;
}
text-center{
    text-align: center;
}           

如果我們使用sass中的周遊方法：

@each $var in (left, center, right) {
    .text-#{$var}{
        text-align: $var;
    }
}           

同樣可以生成類名：

同樣的方法，我們還可以定義字型大小、粗細等樣式。

// 使用px to rem插件設定預設字型大小為13px
// 設定基礎字型大小
$base-font-size: 1rem;
// 根據基礎字型大小設定字型大小
$font-size: (
    // 使用px to rem插件，alt + z 轉化px到rem
    // xs為10px
    xs: 0.7692,
    // sm為12px
    sm: 0.9231,
    // md為13px
    md: 1,
    // lg為14px
    lg: 1.0769,
    // xl為16px
    xl: 1.2308,
);
@each $sizeKey, $size in $font-size {
    // 文字顔色
    .fs-#{$sizeKey} {
        // 尺寸比例 * 基礎字型大小
        font-size: $size * $base-font-size;
    }
}           

px是相對于浏覽器和顯示屏分辨率進行大小的定義，而rem是針對HTML根元素進行大小比例的定義。

這就是sass的 變量 (variables) 功能，掌握了這個方法，我們應該就掌握做出像bootstrap, layui等常見大型css架構的類名定義方法。

5.參考bootstrap制作間距類名

// 間距spacing
// bootstrap中，mt-1 -> margin-top: 1rem, pb-2 -> padding-bottom: 2rem

// 類型
$spacing-types: (m: margin, p: padding);
// 方向
$spacing-directions: (t: top, r: right, b: bottom, l:left);
// 尺寸
$base-spacing-size: 1rem; // 基礎尺寸
$spacing-sizes: (0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3); // 基礎尺寸為準的倍數
@each $typeKey, $type in $spacing-types {
    @each $directionKey, $direction in $spacing-directions {
        @each $sizeKey, $size in $spacing-sizes {
            // 樣版： .mt-1 { margin-top: 0.25rem }
            .#{$typeKey}#{$directionKey}-#{$sizeKey} {
                #{$type}-#{$direction}: $size * $base-spacing-size;
            }
        }
    }
}           

除了margin-top: 1rem；等以外還有margin: 1rem;等：

// m-1, p-1等隻需要嵌套類型變量$spacing-directions和尺寸變量$spacing-sizes
@each $typeKey, $type in $spacing-types {
    @each $sizeKey, $size in $spacing-sizes {
        // 樣版： .mt-1 { margin-top: 0.25rem }
        .#{$typeKey}-#{$sizeKey} {
            #{$type}: $size * $base-spacing-size;
        }
    }
}           

以此類推，還有上下邊距（margin-top + margin- bottom）和左右邊距（margin-left + margin-right），分别為mx-0，px-0和my-0，py-0。

// 水準、垂直方向邊距
@each $typeKey, $type in $spacing-types {
    @each $sizeKey, $size in $spacing-sizes {
        // mx-1,px-1
        .#{$typeKey}x-#{$sizeKey} {
            #{$type}-left: $size * $base-spacing-size;
            #{$type}-right: $size * $base-spacing-size;
        }
        // my-1,py-1
        .#{$typeKey}y-#{$sizeKey} {
            #{$type}-top: $size * $base-spacing-size;
            #{$type}-bottom: $size * $base-spacing-size;
        }
    }
}           

如此，就可以實作像bootstrap中的類名樣式。