06. At 规则

  • @use 加载混入, 函数, 变量, 从其他 Sass 样式文件, 并从多个样式文件中合并 CSS.
  • @forward 加载一个 Sass 样式表, 并使它的混入, 函数, 和变量可用. [问题, 与 @use 的区别]
  • @import 扩展 CSS at 规则, 用于导入样式, 混入, 函数, 以及变量, 从其他样式表中.
  • @mixin 和 @include 创建简单的样式片段进行复用.
  • @function 定义自定义函数, 可以用于 Sass 表达式中.
  • @extend, 允许选择器从其他选择器中继承样式.
  • @at-root 将样式挂到 CSS 的根级.
  • @error 引发编译错误, 并输出错误信息.
  • @warn 输出警告信息, 但不会阻止编译过程.
  • @debug 用于打印输出, 以便调试.
  • 流程控制, 例如 @if, @each, @for 和 @while 等.

1. @use

用于从其他样式表中导入 混入, 函数, 以及变量.

将多个样式变合并到一起, 来生成 CSS.

被 @use 加载的样式表被称为模块 module, Sass 内置了很多模块, 这是个很有用的功能.

最简单的用法 @use <url>;

这样导入, 只有在编译生成 CSS 的时候导入一次, 不用担心多次导入.

注意:

  • @use 应该放在除了 @forward 之外所有样式规则之前. 但是, 你可以在 @use 之前定义变量.

  • 使用下划线作为前缀的命名, 不会被编译.

  • 导入文件可以不带后缀名.

  • 也不用考虑前缀下划线.

@use 'foundation/code';

加载成员

文件名好比命名空间, 在使用模块内成员的时候使用 <namespace>.<menber>.

选择命名空间

使用 as 为命名空间取名. 逻辑与 python 一样.

@use '...' as newNamespace;

还可以使用 as * 来取消命名空间, 但不推荐, 除非就你一个开发者, 否则容易出现命名冲突.

@use '...' as *;

如此模块中的成员名可以直接使用.

私有成员

只允许在模块内使用. 使用 $- 前缀作为变量名.

$-privateVariable: 123px;

配置

模块中的变量使用 !default 作为结尾, 可以在外外部导入时给与重新赋值 (局部影响, 当前模块).

使用条件:

  • 模块内使用 !default

  • 导入后使用 with () 语法

    @use '...' with (
    <variable>: <value>,
    <variable>: <value>
);

与混入 Mixin 合用

@use 虽然方便, 但是不适合做大量配置. 对于需要大量配置, 建议使用 Mixin.

重新赋值

在导入变量后可以重新赋值 (内置变量除外).

查询模块 [暂略]

即不用后缀名, 会自动加载

部分模块, 使用 _ 作为名字前缀.

Index 模块会被自动加载

加载 CSS 文件

可以加载纯 CSS 文件

与 @import 的不同 [重点]

@use 设计出来就是用来代替早期的 @import, 但是依旧故意设计了不同点.

  • @use 仅仅在当前文件作用域中可以使用导入的部分. 不会将导入模块加载到全局.
  • @use 可以保证所有文件只会加载一次.
  • @use 必须出现在文件开头的位置, 且不允许嵌套在样式规则中.
  • 每一个 @use 只允许有一个 Url.
  • @use 的 Url 必须使用引号括起来, 即使是使用缩进语法.

2. @foreard

@forward 规则用于加载 Sass 样式表, 并且在该样式表被 @use 加载后, 使得它的混入, 函数, 以及变量可用.

它可以用来组织多个 Sass 文件模块到一个文件中, 并通过加载一个文件来导入所有模块.

基本语法:

@forward 'url';

其语法形式与 @use 类似. 它会将导入的模块直接处理为公共访问级别, 就好像模块内容直接定义在这里一样.

有种 php 中 include 的既视感.

一般使用模型:

  1. 使用 @forward 组合 Sass 模块 (文件)
  2. 在使用 @use 加载这个模块

如此既可以组合文件, 也可以处理公共访问级别的问题.

如果在同一个文件中, 同时对同一个模块使用了 @use 和 @forward, 那么建议将 @forward 写在前面.

在用于导入 CSS 模块时, @forward 与 @use 的作用是一样的.

添加前缀

使用 @forward 统一导入模块时, 利用 as 语法可以为模块中的所有成员增加前缀.

@forward '...' as prefix-*;

其他 Scss 文件使用 @use 导入该模块后, 使用的成员就全部带有 prefix- 前缀了.

控制显示

有时不想 @forward 加载所有的成员, 需要隐藏一些或仅仅导入一部分, 可以使用两种语法.

// 隐藏一部分, 其余导入
@forward '...' hide <member>, ...;

// 仅显示列出的
@forward '...' show <member>, ...;

配置模块

@forward 的配置用法与 @use 一样. 除了一点, @forward 的配置变量允许带有 !default 修饰. 用于修改上游默认值, 并允许下游再次对其修改.

@forward <url> with (
    <variable>: <value> [!default], ...
);

3. @import [待]

Sass 扩展的 CSS 的 @import 规则, 它可用于导入 CSS 和 Sass 样式表.

不同于 CSS 的 @import, 它会暂用 HTTP 请求, 在加载时请求文件, 然后渲染页面.

Sass 的 @import 导入功能是在编译阶段完成的.

@import 的语法与 CSS 中的语法类似, 只是 Sass 中支持导入多个 url, 只需要用逗号分隔即可.

@import <url>, ...;

Sass 中 @import 的 Url 没有要求必须使用引号.

注意, Sass 团队不推荐使用该语法.

细节待深入: https://sass-lang.com/documentation/at-rules/import

4. @mixin 和 @include [重点]

它用来定义可复用的样式.

混入使用 @mixin at 规则, 语法定义如下:

@mixin <name> [(<argument>, ...)] {
    <any not top-level statement>
};
  • 其语法有两种形式: 一个不带有参数, 一个可以带有参数.
  • @mixin 的名字可以是任意的 Sass 标识符.
  • @mixin 内部可以包含除了顶级语句之外的所有语句.
    • 可以是一段样式规则 (用于放入某选择器中的样式属性声明)
    • 可以是一段样式表 (用于放入某选择器中的子选择器)
    • 甚至是一段逻辑, 修改变量等

使用 @mixin 则使用 @include 即可:

@include <name> [(<argument>, ...)];

在使用时, @include 会放在某个选择器中. 编译后, 此处会被替换成 @mixin 定义的内容.

如果 @mixin 定义的内容中有逻辑语句, 则会执行后, 将生成的内容放在这里.

类似于所有的 Sass 标识符, @mixin 的名字中不区分 中划线 - 和下划线 _.

例如

@mixin name-color {
  color: red;

  @for $var from 1 to 5 {
    .col-#{$var} > & {
      margin-left: #{$var}rem;
    }
  }
}

.box {
  @include name-color;

  font-size: 1.5rem;
}

生成的 CSS 为

.box {
  color: red;
  font-size: 1.5rem;
}
.col-1 > .box {
  margin-left: 1rem;
}
.col-2 > .box {
  margin-left: 2rem;
}
.col-3 > .box {
  margin-left: 3rem;
}
.col-4 > .box {
  margin-left: 4rem;
}

参数

@mixin 可以带有参数, 以便在每次调用是可以自定义其生成的样式.

bootstrap 等框架中有大量这类用法

可选参数

在参数声明时给默认值 (使用冒号赋值), 那么该参数即可称为可选参数.

默认参数值可以是任意的 Sass 表达式, 也可以是前文内容的引用.

关键字参数

@mixin 参数可以使用命名参数的方式进行调用. 这在存在多个默认参数时会非常方便.

参数的顺序支持随意顺序

由于关键字参数支持任意顺序, 所以在重命名时一定要注意.

任意参数

在参数明后加上三个点 ... 则可以使用任意个参数, 这个参数名则作为一个列表来引用所有传入参数.

可以使用 length() 函数获得参数数量, 以便完成循环.

@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

使用任意关键字参数

在传入任意参数时, 也支持关键字参数传入.

可以使用 sass:meta 模块中的 keywords() 函数来映射传入参数.

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

传入任意参数

与 js 中 ... 参数传入的逻辑是一样的. 支持传入列表参数, 并在传入时使用 ..., 则可以解开参数.

$form-selectors: "input.name", "input.address", "input.zip" !default;

@include order(150px, $form-selectors...);

任意参数逻辑与 js 的用法也很类似. 支持将参数在内部再次进行传入.

@mixin <name> (<argument>...) {
    @include <name>(<argument>...);
}

内容块 (Content Blocks)

@mixin 可以带有一个样式块, 即所谓的内容块.

一个混入可以在内部包含一个 @content 来引入一个内容块.

内容块使用一个花括号进行传入, 就像其他 Sass 的块一样. 它会插入到 @content 中.

步骤:

  • 在 @mixin 中, 可以使用 @content 作为一个占位符.
  • 引用时在 @include 时, 在后面追加一个 { /* 样式列表 */ }, 会在编译时插入到 @content 占位符中.

类似于 Vue 等框架中的插槽.

@mixin 中可以含有多个 @content 占位符.

内容块采用词法作用域, 即只能看到 @mixin 被包含时的局部变量.

内容块传参

内容块也支持传入参数, 就像给 @mixin 传入参数一样.

有种回调函数的感觉

  • 在定义 @mixin 的时候, 接收参数, 或生成参数.

  • 在 @mixin 内部使用这个参数, 语法形式为 @content(<argument>, ...).

  • 在使用 @mixin 时, 传入参数, 使用语法:

    @include <name> using(<argument>, ...) {
    /* Sass 内容 */
};

缩进 Mixin 语法 [暂略]

5. @function [重点]

函数用于构造可复用的公式与计算规则. 其目的在于求值.

定义语法:

@fucntion <name> (<argument>, ...) {
    /* 逻辑 */
}

返回值使用 @return at 规则.

函数中的关键字依旧不区分中划线和下划线.

参数

函数的参数允许在调用函数的时候自定义函数功能.

参数使用逗号分隔, 最后一个参数后允许保留逗号.

可选参数

可选参数的逻辑与 @mixin 的模式一样.

关键字参数

逻辑与 @mixin 模式一样.

任意参数

逻辑与 @mixin 一样.

使用任意关键字参数

用法与 @mixin 一样.

传入任意参数

逻辑与 @mixin 一样.

@return

At 规则 @return 用于表示被调用函数的返回值. 它只允许在 @function 中使用, 并且每一个 @function 必须以 @return 结束.

使用模型与其他编程语言一样.

其他函数 [暂略]

Last Updated:
Contributors: jk