在编写接受参数的 mixins 和函数时,您通常希望确保这些参数具有 API 所需的类型和格式。如果不是,则需要通知用户,并且您的mixin/函数需要停止运行。
Sass 通过编写@error的 @error 规则使这变得容易。它打印表达式的值(通常是字符串)以及指示当前 mixin 或函数如何调用的堆栈跟踪。打印错误后,Sass 将停止编译样式表,并告诉正在运行它的任何系统发生了错误。
SCSS
@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
分享笔记