此篇会着重在客制化修改会用到的 sass 基础语法以及观念分为上下两集。

编译

scss 注解有分为 会被编译、不会被编译 两种。

写法：//

// 不会被编译到 css 档案中

写法：/**/

/* 会被编译到 css 档案中 */

变数

几乎全部自定义样式所需要的变数都由 _variable.scss 作为基底。

!default

• 透过 重新赋值 的特性，将尚未重新被赋予新值的变数，保留预设值的设置。

预设值（若没有设置其它颜色，则会是黑色）

$paragraph-color : blue;
$paragraph-color : #000 !default;

p {
  color : $paragraph-color;
}

因此在 _variable.scss 档案中大部分变数结尾都有加上 !default，使开发者进行客制化时，能更方便覆盖原有的变数。

唯一例外情况：

• 变数前的值是 null 则不会被覆盖。

$paragraph-color : null;
$paragraph-color : #000 !default;

p {
  color : $paragraph-color;
}

命名

• 开头主要会由元件、标签名称所组成，或是用途名称。（ex：$paragraph-margin-bottom、$btn-padding-y）
• 比较看不懂的可以直接用全域搜寻变数名称，可以看到使用的程序码，在尝试比对看看编译出来 css 样式，大概就可以了解它的用途。

命名空间 (Namespaces)

简化开头相同的 css 样式。

举例 border

// 原本
.box {
  border: 1px solid #000;
  border-radius: 10%;
  border-color: blue;
}

// 简化
.box {
  border: 1px solid {
    radius: 10%;
    color: blue;
  }
}

sass 内建函式

sass 提供蛮多好用的函式，简单介绍几个常用的。

通用

type-of：返回目标类型。

• 语法：type-of(目标)

type-of(#000); // color;
type-of("Kent"); // string;

zip：合并多个阵列（每个阵列长度必须一致，否则会 编译失败）

• 语法：zip(阵列, 阵列, ...)

zip(1 2, 3 4) //((1 2), (3 4))
zip(1, 4) // (1, 4)

append：新增资料到阵列中

• 语法：append(目标阵列, 参数)

append: (1px 2px, 3px); // 1px 2px 3px
append((), "Kent"); // (Kent) 将型态转为阵列

字串操作

针对字串操作的函式。

str-length：返回字串长度。

• 语法：str-length(目标字串)

str-length("Kent"); // 回传 4

str-index：返回索引值。（搜寻字串中第一次出现的位置，没搜寻到 则会回传 null）

• 语法：str-index(目标字串, 要搜寻的字)

str-index("Kent", "K"); // 回传 1

str-slice：返回撷取後的字串。（从 1 开始，若省略第三个参数则会预设撷取到字串最後）

• 语法：str-slice(目标字串, 起始位置, 结束位置)

str-slice("Kent", 1 ,3); // 回传 Ken
str-slice("Kent", 2); // 回传 ent

阵列操作

针对阵列操作的函式，索引值从 1 开始。

length：返回阵列长度。

• 语法：length(目标阵列)

$color: (#000 #fff #111)
length($color) //3
length(1px 2px 3px) //3

index：返回索引值。（搜寻阵列中第一次出现的索引值，没搜寻到 则会回传 null）

$color: (#000 #fff #111)
length($color, #000) //1
length(1px 2px 3px, 3px) //3

nth：返回该索引的值。（获取阵列中对应位置的值，没搜寻到 则会编译错误。）

$color: (#000 #fff #111)
length($color, 1) //#000
length(1px 2px 3px, 3) //3px

map 操作

针对 map 型态操作的函式。

map-get：返回取的值
map-has-key：返回布林值。（搜寻 map 中 key 值是否存在）
map-keys：返回阵列。（由所有 key 值所组成）
map-values：返回阵列。（由所有 value 值所组成）
map-remove：删除 map 指定的 key 资料。（若 key 不存在 map 中，则会回传和之前一样的 map）
map-merge：合并两个 map。

$font-sizes: (
  "1": 1rem,
  "2": 2rem,
  "3": 3rem
);

map-get($font-sizes, "2"); // 2rem
map-has-key($font-sizes, "2"); // true
map-keys($font-sizes) // ("1", "2", "3")
map-values($font-sizes) // (1rem 2rem 3rem)

map-remove($font-size, "3"); //("1": 1rem, "2": 2rem)

map-merge($font-sizes, (
  "4": 4rem,
  "5": 5rem
)); 
//("1": 1rem, "2": 2rem, "4": 4rem, "5": 5rem)

想了解更内建函式请参考官方文件：Built-In Modules

连接符号

-、_ 符号

• 对於 scss 宣告 变数名称 或 函式名称 时是相同的。

变数范例

$banner_title: 87px;

.banner {
  font-size: $banner-title;
}

覆盖特性

$banner-title: 87px;
$banner_title: 987px;

.banner {
  font-size: $banner-title;
}

函式范例

@function mix_color($color1, $color2) {
  @return mix($color1, $color2);
}
.text-color {
  color: mix-color(#010203, #040506);
}

⚠️ 注意

• 只有在 变数名称 或 函式名称 使用上才是相同，如果是 样式名称 就不同了。

& 符号，用於连接的父层撰写巢状结构（类似 BEM 命名结构）

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

编译後的 css

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

巢状结构真的写过都说赞，写到後面根本无法离开。

想了解更多符号请参考官方文件：Style Rules

下一集将介绍资料型态、运算符号、插补。