上篇文章我们学习了如何在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中的类名样式。