CSS: Preprocessor: SASS: Customize Existing Library

20th August 2020 at 2:19pm
CSS: Preprocessor: SASS

对于使用 SASS 编写的 CSS 库,一般提供了自定义的能力,可以用来修改库作者提供的各种变量,或者增加新的样式。

以 Bulma 为例:

@charset "utf-8"

/* 对 Bulma 定义的变量做修改时,应该放在 import 语句之上,因为 bulma 在定义变量时会使用 SASS 的 !default */
$box-padding: 0.75rem

@import "../node_modules/bulma/bulma.sass"

/* extend 了 Bulma 的 box 类时,应该放在 import 语句之下 */
.compact-box
  @extend .box
  padding: 0
  border: 1px solid $primary
  border-radius: initial