1. @debug

@debug会在编译scss文件时打印表达式的值,方便调试。

$font-sizes: 10px + 20px;
    $style: (
        color: #bdc3c7
    );
.container {
    @debug $style;
    @debug $font-sizes;
}

2. @error

@error 抛出致命错误

$colors: (
    blue: #c0392b,
    black: #2980b9
);
 
@function style-variation($style) {
    @error "Invalid color: '#{$style}'.";
    @if map-has-key($colors, $style) {
        @return map-get($colors, $style);
    }
}
.container {
    color: style-variation(white);
}

3. @warn

@warn抛出警告性建议,会显示堆栈信息。

$colors: (
    blue: #c0392b,
    black: #2980b9
  );
 
@function style-variation($style) {
    @warn "Invalid color: '#{$style}'.";
    @if map-has-key($colors, $style) {
        @return map-get($colors, $style);
    }
}
 
.container {
    color: style-variation(white);
}

4. 自检函数

child::Scss 判断变量或maxin是否存在