## 开发
### 注意事项
- 由于分包管理，我们的样式必然会 import 多次
    - 比如 core -> button, core -> icon, ... button -> modal, modal -> main, button -> main ...

- 使用 `exports` mixin 规避编译时的重复输出
    - 见 https://www.ofcodeandcolor.com/2017/01/28/managing-dependencies-in-sass
    
- 关于 `themes`, `mixins` 
    - 只包含 variable, mixins, functions 等抽象声明（没有编译结果的东西），不要被包含 css 样式声明
    - 不要包含 block comments 和 documentation comments，
    - 因为这两种注释会被保留输出到 css 中，但没有意义，以为这些抽象申明本身不会编译输入任何 css rules
    - 详见 https://sass-lang.com/documentation/syntax/comments
    - `mixins` 中的东西不应该依赖 themes 的 variable，依赖 themes variable 的应该由 themes 提供 @function
    
- 区分 core 与 common
    - core 为每个组件都需要的“基础样式”
    - common 是某些组件需要的“通用样式”
    - index 不要 import common 里的东西，common 中的东西由组件分别按需 import
    
- theme 里 variable 应该都加上 `!default`
    - 由于 `!default` 的规则是“先入为主”，普通 variable 是后置覆盖 
    - theme 的覆盖在引用顺序上是反过来里的，见 themes/_erp.scss
    - theme-overrides 的 variable 也总是加上 `!default`，见 themes/_default.scss 与 themes/_erp.scss
    - https://medium.com/@bajena3/a-story-about-overriding-scss-variables-and-the-default-keyword-eace1de34631
    
## Memo
### Sass: Using `/` for division is deprecated
在 `2021-05-28` 之前使用 `sass@1.29.0` 版本在开发者 `build` 时会报 👇👇👇 `DEPRECATION`

> DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

大概意思就是会 `/` 这个运算符会废弃，于是官方给了一个 `Automatic Migration` 的方式，如下

```sh
npm i sass@latest

npm install -g sass-migrator
sass-migrator division **/*.scss

# Or

pnpm exec sass-migrator division **/*.scss
```

[More Information](https://sass-lang.com/documentation/breaking-changes/slash-div#automatic-migration)