SCSS 笔记 – kymot

上个月用 SCSS 重写了自用的样式表（已开源），想简单记录一下学到的东西。

SCSS 的特点有

变量
嵌套
各种方法，使用 @ 标记。

我使用的是 Dart SASS，我也推荐使用这个。详见官网的安装说明。

Debug

@debug 接一个表达式。这样会在转换时在开头打印文件名、行号和这个表达式的值。

我用的是Nushell不是Bash……意思理解就可以了，复制到POSIX Shell是跑不了的。

'$font: serif; @debug $font == sans-serif;foo { font: $font }' | sass --stdin

-:1 Debug: false
foo {
  font: serif;
}

变量

$variable: value

变量会在声明时确定值，而非惰性求值；不同于 CSS var()。

变量有作用域。作用域内可以改变外层的变量的值，但需要变量先在外层得到声明。例如

$font: null;
$sans: false;
@if $sans {
  $font: sans-serif;
} @else {
  $font: serif;
}
// $font: serif

在字符串中使用变量的方式：用 #{} 括起。如 "The font is #{$font}"。

嵌套

直接嵌套的话顺序和 HTML 元素的顺序一致。其他情况使用 & 表示母元素。

ul, ol {
  padding-left: 2em;
  #toc & { // #toc ul, #toc ol
    padding-left: 1em;
  }
}

复用

可以使用 % 开头的名称标记一个可复用的块。如果没有在别处使用（使用 @extend），这个块不会出现在转换好的 CSS 里。

%block-margin {
  margin: .7em 0;
}
p, ol, ul, pre, dl, table {
  @extend %block-margin;
}

@extend 的对象未必是这样命名的块，也可以是其他选择器。这样在复用对象的定义比较分散的时候很方便。

blockquote {
  color: #333;
}

// 在另外某处
blockquote {
  background-color: #eee;
}

.my-blockquote {
  @extend blockquote;
}

Mixin

不知道中文名是什么，官方文档也没有翻译。

类似函数，但返回一个块。在复用的基础上可以有一些变化。

@mixin card($bg, $border-color) {
  background: $bg;
  border-left: 5px solid $border-color;
  margin: .5em 0;
  margin-right: auto;
  padding: .4em 1.5rem;
  padding-left: calc(1.5em - 5px);
  // 也可以嵌套选择器。我喜欢！
  & & {
    padding-right: 0;
  }
}
blockquote {
  @include card(#fafafa, #ccc);
}
.notecard {
  @include card(#dcf4ff, #89acd7)
}

模块

作为模块的文件不需要额外声明。

导入模块的方式是 @use。也可以用 @import，但跟 CSS 的语法冲突了，而且默认是全局的导入，而通过 @use 导入的变量、Mixin 是需要通过模块名获取的。

用 !default 标记的变量可以在导入的时候赋值。

// fonts.scss
$sans: false !default;
$font: serif;
@if $sans {
  $font: sans-serif;
}

// sans.scss
// 注意括号和分号，注意 `as` 的位置
@use 'fonts' as * with (
  $sans: true
);
@debug $font == sans-serif; // true

// 如果没有 `as *`：
@debug fonts.$font == sans-serif; // true

我不大用得到的部分

函数：参考官方文档。用到函数的地方跟变量一样不是惰性求值的，所以和 CSS 的函数（calc() 之类）还是不一样的。
错误处理：文档。用在 Mixin 和函数之类的地方。毕竟 CSS 没有类型嘛。
@forward：文档。不好解释，也就是更方便模块化吧。
流程控制我没细说。
以及其他我没有提到的。