指令简介

约 1093 字大约 4 分钟

2025-04-07

一、指令简介

1、模块系统指令

1. `@use` 指令

引入模块（现代替代 @import）

示例：

@use "colors" as c;
body {
  background-color: c.$primary; // 使用模块变量
}

1.2. `@forward` 指令

转发模块成员（类似中转导出）

示例：

@forward "grid" hide $gutter;
.container {
  @include grid(12); // 导入 grid 模块的 grid 混合器
}

2、混入（Mixins）相关

2.1. `@mixin` 指令

定义可复用的样式块，配合 @include 调用

示例：

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  @include flex-center; // 调用混合宏
}

2.2. `@include` 指令

调用混合宏, 插入样式块，配合 @mixin 定义

示例：

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  @include flex-center; // 调用混合宏
}

2.3. `@content` 指令

在混合宏中插入外部代码块，用于实现样式的继承或扩展

示例：

@mixin hover {
  &:hover {
    @content; // 插入外部代码块
  }
}
.button {
  @include hover {
    color: red; // 插入的外部代码块
  }
}

3、函数（Functions）

3.1. `@function` 指令

定义自定义函数、接受参数并返回值，可以使用 @return 指令返回结果。

3.2. `@return` 指令

在函数中返回计算结果，用于函数的返回值。

示例

@function double($n) {
  @return $n * 2;
}
body {
  font-size: double(16px); // 调用函数 32px
}

4、流程控制

4.1. `@if` / `@else` / `@else if` 指令

条件分支，根据条件执行不同的样式。

示例：

@if $size > 10 {
  font-size: 16px;
} @else if $size > 5 and $size <= 10 {
  font-size: 14px;
} @else {
  font-size: 12px;
}

4.2. `@each` 指令

遍历列表或 Map，对每个元素执行相同的样式。

示例：

$list: red blue green;
@each $color in $list {
  .color-#{$color} {
    background-color: $color;
  }
}
@each $red, $blue, $green in $list {
  .color-#{$red} {
    background-color: $red;
  }
  .color-#{$blue} {
    background-color: $blue;
  }
  .color-#{$green} {
    background-color: $green;
  }
}

4.3. `@for` 指令

数值范围循环，根据条件执行相同的样式。

示例：

@for $i from 1 to 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

4.4. `@while` 指令

条件循环，根据条件执行相同的样式。

示例：

$i: 1;
@while $i <= 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

5、继承与占位符

5.1. `@extend` 指令

继承选择器样式，将一个选择器的样式应用到另一个选择器。

5.2. `%placeholder` 指令

定义占位符选择器，用于定义样式的模板，不会生成实际的 CSS 选择器。

示例：

%text-style {
  font: bold;
}
.error {
  @extend %text-style;
}

6、调试与错误处理

6.1. `@debug` 指令

输出调试信息，用于在编译时查看变量值。

示例：

$var: 10;
@debug "当前变量: #{$var}";

6.2. `@warn` 指令

输出警告信息，不影响编译流程。

示例：

@warn "已弃用此 mixin";

6.3. `@error` 指令

抛出错误信息，中断编译过程。

示例：

@error "参数无效";

7、样式结构控制

7.1. `@at-root` 指令

将嵌套代码提升到根层级，避免不必要的嵌套。

示例：

@at-root .child {
  color: red;
} // 编译为 .child { color: red; }

7.2. `@media` 指令

嵌套媒体查询，支持 Sass 增强的语法。

示例：

@media (width > 600px) {
  .container {
    width: 100%;
  }
}

7.3. `@supports` 指令

特性检测嵌套，支持条件样式。示例：

@supports (display: grid) {
  .container {
    display: grid;
  }
}

7.4. `@keyframes` 指令

动画关键帧，支持嵌套。

示例：

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

8、资源导入与编码

8.1. `@import` 指令

导入文件（旧版，逐步弃用）。

示例：

@import "legacy.scss";

8.2. `@charset` 指令

声明文件编码（需在首行）。

示例：

@charset "UTF-8";

9、其他高级指令

9.1. `@extend!optional` 指令

避免继承失败报错，避免编译错误。

示例：

@extend.missing!optional;

9.2. `@at-root (without: media)` 指令

指定跳出某些嵌套层级，避免不必要的嵌套。

示例：

@at-root (without: media) {
  .container {
    width: 100%;
  }
}

二、代码示例

1、模块系统 + 配置

// _config.scss
$primary: blue !default;

// main.scss
@use "config" with (
  $primary: red
);
.button {
  background: config.$primary;
}

2、循环生成 Grid 布局

@for $i from 1 through 12 {
  .col-#{$i} {
    width: 100% / 12 * $i;
  }
}

3、动态主题生成

$themes: (
  dark: #000,
  light: #fff,
);
@each $name, $color in $themes {
  .theme-#{$name} {
    background: $color;
  }
}

4、安全的 `@extend` 继承

%base-button {
  padding: 10px;
}
.submit-btn {
  @extend %base-button;
  background: green;
}

三、总结与最佳实践

模块化优先：使用 @use 和 @forward 替代 @import。
逻辑控制：用 @each/@for 替代重复代码。
健壮性：在函数和混合宏中用 @error 验证参数。
性能优化：用占位符 (%) + @extend 减少 CSS 体积。

建议结合 Sass 官方文档深入学习特定指令的细节！

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24