如何在 SASS 中将变量打印到终端？

SASS 具有三种在用户的终端或控制台上提供输出的方法。

注意：输出可能因实现和编译器而异。

• 使用@error 规则：在编写带有参数的 mixin 和函数时，您通常希望确保这些参数具有您的 API 期望的类型和格式。如果不是，则需要通知用户并且您的 mixin/函数需要停止运行。

  Sass 使用@error规则使事情变得容易，它被写成@error 。它打印表达式的值(通常是字符串)以及指示当前 mixin 或函数如何被调用的堆栈跟踪。一旦错误被打印出来，Sass 就会停止编译样式表并告诉任何正在运行它的系统发生了错误。

  例子：

  @mixin reflexive-position($property, $value) {
    @if $property != top and $property != bottom {
      @error "Property #{$property} must be either top or bottom.";
    }
    
    $top-value: if($property == bottom, initial, $value);
    $bottom-value: if($property == bottom, $value, initial);
    
    top: $top-value;
    bottom: $bottom-value;
    [dir=rtl] & {
      top: $bottom-value;
      bottom: $top-value;
    }
  }
    
  .sidebar {
    @include reflexive-position(left, 12px);
  }
  

  这是编译器在Dart CSS 中的样子：

  Error: "Property left must be either top or bottom."
    ?
  3 ?     @error "Property #{$property} must be either top or bottom.";
    ?     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ?
    example.scss 3:5   reflexive-position()
    example.scss 19:3  root stylesheet
  

• 使用@warn 规则：在编写mixin 和函数时，您可能需要避免用户传递某些参数或值。他们可能正在传递现在已弃用的旧参数，或者他们可能以不太理想的方式调用您的 API。
  @warn规则就是为此而设计的。它写成@warn ，它为用户打印表达式的值(通常是一个字符串)，以及一个堆栈跟踪，指示当前 mixin 或函数是如何被调用的。但是，与@error规则不同的是，它并没有完全阻止 Sass。

  示例： SASS 文件

  $known-properties: webkit, hd;
    
  @mixin property($character, $value, $properties) {
    @each $property in $properties {
      @if not index($known-properties, $properties) {
        @warn "Unknown property #{$property}.";
      }
    
      -#{$property}-#{$character}: $value;
    }
    #{$character}: $value;
  }
    
  .tilt {
    @include property(transform, rotate(30deg), webkit hd);
  }
  

  输出： CSS文件

  .tilt {
    -webkit-transform: rotate(30deg);
    -hd-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  

  这是编译器在Dart CSS 中的样子：

  Warning: Unknown property webkit.
      example.scss 6:7   property()
      example.scss 16:3  root stylesheet
  

• 使用@debug 规则：有时在开发样式表时查看变量或表达式的值很有用。这就是@debug规则的用途：它写成@debug ，它打印表达式的值，以及文件名和行号。

  示例： SASS

  @mixin inset-divider-offset($offset, $padding) {
    $divider-offset: (2 * $padding) + $offset;
    @debug "divider offset: #{$divider-offset}";
    
    margin-left: $divider-offset;
    width: calc(100% - #{$divider-offset});
  }
  

  这是编译器在Dart CSS 中的样子：

  test.scss:3 Debug: divider offset: 132px
  

注意：您可以将任何值传递给@debug，而不仅仅是字符串！它打印出与 meta.inspect()函数相同的那个值的表示。