Day14 Sass 变数有趣的地方

大家好，我是乌木白，我今天要讲的是，变数有趣的地方及进阶的用法。

变数可以加减乘除！！

在一个设计稿里面，大部分的设计师在设定文字大小、间距的宽度，都会尽量使用倍数的方式来做设计，这时候我们就可以先去设定基准点，再利用那个基准点去做加减乘除的运算，来达到我们的使用目的！

$font-s : 16px;
$font-l : $font-s * 1.5;

.header {
    font-size : $font-l;  //16*1.5 = 24 
}

例如以上这样的写法

字串管理

大部分字串管理，都是在设定字型的时候会用到，那有时候做好专案了，客人可能看了对於字型不太满意又要改，这时候直接用字串管理会方便许多喔

以下范例：

$font-family-base : 'Roboto', sans-serif;

body {
    font-family : $font-family-base;
}

darken、lighten

这两个是在调整变数里面的颜色，darken 这个是让颜色暗一点， lighten，这个是让颜色亮一点。

目前在许多样板的套件也都是使用 Scss 来做设定，例如：Bootstrap 大家可以去他的 Github 参考看看喔！