• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • @error

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

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

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

    跟踪,错误和堆栈的确切格式,因实现而异,也可能取决于您的构建系统。这是从命令行运行时在 Dart Sass 中的样子:

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

    上篇:@extend

    下篇:@warn