@befe/brick-style v0.2.54

开发

注意事项

• 由于分包管理，我们的样式必然会 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 的方式，如下

npm i sass@latest

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

# Or

npx sass-migrator division **/*.scss

More Information