此篇会教学如何将 Bootstrap 通用类别 utilities 自干一个出来。

事前准备：

1. 原始码架构
2. 编译 sass 环境
3. sass 基础概念

原始码

使用到四只档案：

• utilities/_api.scss：通用类别主要执行入口。
• _utilities.scss：通用类别参数资料。
• mixins/_breakpoints.scss：负责撰写最外层 @media 响应式。
• mixins/_utilities.scss：负责生成通用类别样式。

可以搭配注解看原始码，Bootstrap 注解算写的蛮好理解的。

粗略拆为三个部分讲解

後续会大量应用到 @mixin、@include、@content 不熟悉的朋友请参考这篇：@mixin 建立专属语法资料库（蛮好理解的，最後也有附上 CodePen 范例）

设置断点 @media 样式

取得断点参数的 key（ex：xs、sm、md、lg）将其组合成阵列，再透过回圈读取出来。

@each $breakpoint in map-keys($grid-breakpoints) {
}

先撰写外层 @media 样式，最後会再依照 utility 参数判断是否要写入到断点中。

@include media-breakpoint-up($breakpoint) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
}

media-breakpoint-up

media-breakpoint-up 来自於 mixins/_breakpoints.scss。

判断条件：

• 断点值若为 0 则不撰写外层 @media 样式。

@content：代表之後 generate-utility 生成的通用类别样式。

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

$infix

取得断点的 point，回传一个 point 加上 - 符号的字串（ex：-md），用於之後生成样式时断点字串。（ex：pd-md-1）

$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

读取 utility 参数

取得 _utilities.scss 设置的 $utilities: () map，并透过回圈方式将其参数一一取出。

若还不了解如何撰写 utilities 通用类别参数，请参考官方 API 文件。

@each $key, $utility in $utilities {
}

判断条件

若符合以下两个条件，才会执行最後的 generate-utility 生成通用类别样式。

1. $utility 资料是否为 map 资料型态

• 确保後续 generate-utility 在执行逻辑的部分能正常。

2. $utility 资料中，是否有设置 responsive: true

• 仅有在设置响应式断点为 true 时才会撰写对应的断点 @media 样式，否则只会有一般的通用类别样式。

@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
}

下一集将解析 generate-utility 是如何生成通用类别样式。