Sass @error 错误指令

学习使用 @error 指令在编译时抛出错误并终止编译。 · 难度：入门 · +15XP

@error 指令概述

@error 用于在编译过程中抛出严重错误，并立即停止编译过程。这有助于在源文件存在致命问题时及时告知开发者。

基本语法

@error <message>;

使用示例

@mixin responsive($breakpoint) {
  @if $breakpoint == 'sm' or $breakpoint == 'md' or $breakpoint == 'lg' {
    // 正常处理
  } @else {
    @error "未知断点 #{$breakpoint}，可用值：sm, md, lg";
  }
}

最佳实践

实际案例

$valid-colors: ('red', 'green', 'blue');
@function get-color($name) {
  @if not index($valid-colors, $name) {
    @error "无效颜色名称 #{$name}，可选：red, green, blue";
  }
  @return unquote($name);
}
.text {
  color: get-color('yellow'); // 触发错误
}

练习提示

创建一个混合宏，用于设置网格列数，当传入的列数不在 1 到 12 之间时，使用 @error 抛出错误。