Day 08 - Design System x 实作 — Color System

今天是这系列第一次碰 Code，要来介绍三种 Color System 在专案中实作的方式，但实现方式绝对不只这三种，这边只是提供个参考或概念给大家！

这三种实作方式会使用到的工具分别是：

1. 原生 CSS
2. SCSS
3. Tailwind CSS。

因应一般专案开发上很少只写纯 CSS，接着会介绍我之前发时都会使用的 CSS 预处理器 SCSS ，而最後则是现在很流行的 CSS 框架 Tailwind。

还不知道这些工具的话，我会在以下稍微介绍一下这些工具以及为什麽使用它们，语法的部分就有用到的地方会介绍，而更详细的坊间有很多文章可以参考了，因为不是这系列的重点就不会多赘述罗！

先来看看昨天介绍到 Material Design - Palette，基本上就是要在开发时能更顺畅地去使用它们：

第一种： 原生 CSS 基本款

利用原生的 CSS 变数特性，使用方式很简单

1. 建立 css 变数：开头使用两个破折号 --
2. 使用 css 变数：用 var() 呼叫该变数

而 CSS 变数必须要在全域都能套用，可在 :root 根选择器里面定义，这「根」其实就代表 html ，所以使用 :root 跟 使用 html 是等价的，因此之後在同个 html 底下的 css 都能使用到这些变数。

这个方法需要注意的地方主要是可能被底下的区域变数覆盖，但只要意命名空间 (NameSpace) 没有重复就不会有什麽问题。

:root {
  --primary: #364a6f;
  --secondary: #c8b289;
}

.element {
	background-color: var(--secondary);
  color: var(--primary);
}

对，原生 CSS 就是这麽简单粗暴、轻松写意。

但由於专案开发上有很多帮助开发 CSS 的工具，像是等下会介绍的 SCSS 和 Tailwind，因此现在也很少只使用原生 CSS 了，主要适合的情境就是一些小专案。

第二种： CSS 预处理器 SCSS 进阶款

开始前先简介一下 SCSS

它是一种 CSS 预处理器，可支援到 CSS3，我们也可以很常看到它跟 SASS 连在一起提到 — SASS/SCSS ，那是因为它是 SASS 的新式语法，两者主要差别在於 SCSS 能兼容原生 CSS 的语法，直接把 CSS3 的语法复制过来也可以，使用起来比 SASS 顺手很多。

那为什麽需要 SCSS 呢？

主要是撰写原生 CSS 没有一般程序语言的语法，它所做的就只是透过 CSS 选择器去抓取对应的元素更改样式而已，就算有 CSS 变数了，但诸如函式、回圈和嵌套（nested）等还是不支援，导致许多重复的选择器要一写再写，个人小专案可能还能应付，但在大型专案或多人协作的情况下就会造成程序码的重复性太高，未来维护成本也非常高。

而像 SASS/SCSS 这种 CSS 预处理器就是让你可以「预先」处理你的 CSS，照着 SASS/SCSS 的语法去使用变数、混入、继承、嵌套和函式来编写 CSS，而浏览器存取前会先编译成 CSS 後再取用。

如此一来，就可以像一般程序语言一样去管理你的 CSS 程序码了。

运作流程：

图源：https://www.ironistic.com/insights/css-preprocessors-or-else/

基本使用上可以先定义好专案的色码变数，并包装成 function 让大家使用。

简单写一个 palette.scss 来示范：

// palette.scss
$variables: (
  primary: #6200EE,
  secondary: #03DAC6,
	background: #FFFFFF,
	surface: #000000,
	ERROR: #B00020,
);

@function get($key) {
  @return map.get($variables, $key);
}

// element.scss
@use './palettes.scss';

.className {
  background-color: palette.get(primary);
}

第三种： CSS 框架 Tailwind 潮潮款

Tailwind 是什麽？

Tailwind 是一个 CSS 框架，2017 年正式公开 v.0.1.0，在这一两年有越来越多人投入使用，它的特色在於功能优先 (Utility First) 的设计理念，功能 (utility) 在 CSS 框架的意思就是指「 CSS 的样式」，也就是说它提供的是一套完整的 css class ，这些 class name 会有各自对应的样式功能，当然也能让你自订这些 class 的样式。

其他框架（如 Bootstrap）都是 component + class，它们提供的不只是单纯的样式，还有元件也都打包成一组给你了。

Tailwind 可以让你脱离元件，单纯使用它提供的 class 自在地应用在各个地方。

<div className="flex" /> // => div 这样就会有 display: flex 的属性

那 Tailwind 该如何定义 Color System 呢？

先来看 Tailwind 本身的 Color System：

上面是 Tailwind 提供的色码表，你可以照着它来使用 Tailwind 预设的色码。

而在 Tailwind 使用颜色时只要记得：「任何需要颜色的地方，都是参照 {property}-{color} 的方式来使用」。

举例来说：

<div class="bg-pink-900 border-yellow-900"></div>

1. bg-pink-900 是指背景(bg) 的颜色是 pink-900 / #831843 。
2. border-yellow-900 是指边框 (border) 的颜色是 yellow-900 / #78350F 。

如果 UI 设计师能以 Tailwind 本身提供的色码表为基础去设计网页的话，前端工程这边就能可以无痛地直接去使用 Tailwind 本身的 Color System。

但如果想符合我们对 Color System 语意化色码的要求 (primary, secondary) ，或是想要的色码上面就是没有的话，也可以在 Tailwind Config 里客制化。

什麽是 Tailwind Config？

Tailwind 使用时会需要写一个设定档 tailwind.config.js ，你可以在这里对其做任何客制化的设定，Color System 的语意化命名也是在这个设定档里设定。

而颜色的客制化有三种方式：

1. 直接写色码
2. 使用 Tailwind Palette （上图）
3. 使用 CSS 变数

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
			// 1.
      primary: '#5c6ac4',
      secondary: '#ecc94b',
			// 2.
			primary: colors.indigo,
      secondary: colors.yellow,
			// 3.
			primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...other color
    }
  }
}

/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}

颜色的扩充方式则是有以下两种

1. 覆盖（无法继续使用 Tailwind 原生色码）：直接写在 theme.colors
2. 扩充（可在使用 Tailwind 原生色码的同时，也使用自定义的）：写在 theme.colors.extend

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
			// 1. 覆盖
    }
		extend: {
			colors: {
				// 2. 扩充
			},
		},
  }
}

上述设定完之後，你就能像这样使用你的语意化命名了！

<div class="bg-primary border-secondary"></div>

（但还是需要遵守 {property}-{color} 的方式使用哦）

其他更详细的说明请参照官网，Tailwind 现在也有繁体中文版了！

小结

介绍完三种做法之後，我们会发现 Design System 设计出来後，前端有很多种方式跟工具可以在专案中实现它们。

每项技术都有自己诞生的时代背景跟适合使用的情境，三种方式之间没有优胜劣败，有的只是适合的使用情境。

原生 CSS 适合小型专案开发，不需要额外去引入 SCSS 或 Tailwind 这种工具增加复杂度。

SCSS 是在大型专案或多人协作开发时，让你可以像写一般程序语言一样写出结构良好、可复用、维护性高的 CSS。

Tailwind 由於是框架规模，更进一步帮你把所有东西统合成一个个 utility class，只要熟悉这些 class，再搭配 config 档的客制化，设定好 config 後，你的 Design System 就差不多完成了，可以大幅减少建置时间，也不用像 SCSS 那样要再学一堆语法。

而之後 Demo 则会使用 Tailwind 来实作（真的又快又香）！

最後，这边虽然介绍的只有 Color System 的实作，但其实与纯 CSS 相关的 Design System 元素（ 如 spacing、size、z-index ），它们实作起来的概念也都差不多是 「定义好名称和对应的值」。

• Color 定义 primary, secondary, ... 对应到什麽色码
• Spacing 定义 spacing-1 ～ spacing-5 对应到多少 px, rem
• z-index 定义 z-0 ～ z-10 对应到的堆叠顺序
• ...

所以希望介绍完 Color 之後，需要定义其他的 Design System 元素都能举一反三了！
（那如果用 Tailwind 的话就是真的很方便，大多数都帮你定义好对应的 utility Class 了）

那今天就到这罗，有任何问题或是觉得还有别的方式可以实作 Design System 的话欢迎留言告诉我！

预告一下明天要讲的是 Typography 的元件实作啦！

那就明天见啦！

References：

1. https://material.io/design/color/color-usage.html#brand
2. https://blog.hiskio.com/tailwind-css-or-bootstrap/#1_CSS
3. https://www.bigboycancode.com/posts/tailwind-tutorial/
4. https://medium.com/@hayato.chang/浅谈-tailwind-css-4153d86eb661
5. https://ithelp.ithome.com.tw/articles/10239117