此篇接续客制化 sass 基础语法以及观念下集，尚未观看上集可以先看完再来看下集。

Operators 运算

介绍 sass 原生的 运算 功能，以往 css 要使用计算必须透过 calc()。

空白间隔

• 建议 加减乘除 符号前後都加上空白，否则可能会导致编译失败。

.home {
  height: 400px + 50px;
}

单位

• 不同单位 运算可能会导致编译失败，建议不同单位最好不要混搭（减少编译失败机率）。

原因：

• 绝对单位（ex：px、cm）和相对单位（ex：em、erm）彼此关系。（详细介绍请参考 Chris 大的：前端新手村 CSS 的单位）

示范将演示分为三种（加法减法、乘法除法）

第一种：加法减法

• 除非可换算的绝对单位，其余只能是相同单位做加法减法。
• 可换算的绝对单位，会以前面的单位作为换算单位。

font-size: 1px + 1px;  // 2px
font-size: 1pt + 1px;  // 1.75pt
font-size: 1px + 1pt;  // 2.3333333333px
font-size: 1rem + 1px; // 编译失败

比较好理解的方式

• 相对单位（ex：em、erm），无法确保每个单位的固定值是多少，所以造成无法换算。
• 绝对单位（ex：px、cm），每个单位的值都是确定的不会因为参数设置，就造成每个人的 1px 都不一样。

第二种：乘法除法

• 单位彼此也会乘法除法。
• 相同单位的解决办法就是 除 1单位。

font-size: 1px * 1px; // 1px*px，单位变成 px*px 所以编译失败。
font-size: 1px * 1px / 1px; // 1px，因为把多余的 px 抵销，所以运行成功。

第三种：无单位

• 会自动补上相同的单位。

font-size: 1px * 3;  // 3px
font-size: 1rem * 4; // 4rem

⚠️ 注意

• 建议不同单位最好不要混搭，减少编译失败机率。（除非觉得自己...）

想了解更多请参考官方文件：Numeric Operators

型态

scss 宣告变数主要使用 $ 关键字，且变数和 javascript let 变数 雷同，变数拥有可以被 重新赋值 的特性。

资料型态有以下几种：（最後将 Null、Function references 拉出来特别介绍）

• 数值 (Number)：12、100px (可能有或没有单位)
• 字串 (String)："Helvetica Neue"、bold (可能有或没有引号)
• 颜色 (Color)：blue、#c6538c、rgb(107, 113, 127) or hsl(210, 100%, 20%)
• 阵列 (List)：1.5em 1em 0 2em、Helvetica, Arial, sans-serif
  • 以空格或逗号隔开、或是使用 ()、[] 也可以。
  • 阵列索引值从 1 开始。
• 地图 (Maps)：(primary: blue, danger: red)
  • 物件型态，会由一个 Key 对应一个 Value 所组成，常用於储存多笔类似的资料。
• 布林 (Boolean)：true、false
  • scss 中只有 false 与 null 两者算是 false，其余的皆为 true（ex：空字串、空阵列、0）。

空值（Null）

若为空值，则编译 css 时会自动 省略。

$demo-color: (
  'black': #000, 
  'white': #fff
);

.banner {
  .banner-title {
    color: map-get($demo-color, 'blue');
    font-size: 3rem;
  }
}

编译後 css

.banner-title {
  font-size: 3rem;
}

Null 在撰写生成通类别的程序码时，常会使用到的一资料型态。（後面章节会介绍到）

函式参考（Function references）

属於资料型态的一种，将 非全域 函式，传给其他区域函式使用，详细可以参考官网。

Bootstrap 使用其它两种方法也可以达到相同效果：

1. 同一只档案中定义 全域 函式，让其他函式呼叫。
2. 使用 @mixin、@include。

真的很少很少很少看到有使用到 get-function()、call() 的情况。

想了解更完整的范例请参考官方文件：Values

Interpolation

中文翻译为 插补，将变数替换成字串使用。

语法：#{}

常用於生成通用类别或需要替换字串的地方。（ex：url 连结）

生成通用类别

$btn-types: (
  'blue': #809393,
  'yellow': #F0E5B0
);

@each $key, $value in $btn-types {
  .btn-#{$key} {
    color: $value;
  }
}

编译後的 css

.btn-blue {
  color: #809393;
}

.btn-yellow {
  color: #F0E5B0;
}

url 连结

$img-name: teacher;
background-image: url('/#{$img-name}.png');

⚠️ 谨慎检查 css 编译是否正确

想了解更多请参考官方文件：Interpolation

下一集将详细介绍 Bootstrap 客制化 _variable.scss 档案。