我正在努力构建一组常见的 SASS mixins。其中一些mixin有5-10个变量，所有变量都有默认值。我想要一种方法来检查用户是否有输入值 -不是变量内容，而是是否有实际的用户输入。例如，在以下混合中：
@mixin backdrop($color: #000) {
background-color: $color;
}
如果用户在自己的代码中调用：
@include backdrop(#000);
不应该有任何警告。即使它们输入的值与默认值相同，仍然存在用户输入，因此不需要@warn。但是，如果用户调用：
@include backdrop;
应该有一个警告，以确保用户知道可能的变量。
这对于具有更多变量的混合更有用。例如，假设我的网站有一个标准按钮：
@mixin button($background: #222, $textcolor: #fff, $corner-round: 5px) {
background-color: $background;
color: $textcolor;
border-radius: $corner-round;
}
用户可以输入@include button;，他们会得到一个带有白色文本和 5px 圆角的深灰色按钮。通常，如果有人使用这样的 mixin，而不是他们自己编写的，他们可能会认为 - 看到代码中其他地方使用的@include button;- 没有变量。我知道最好的做法是检查一个不熟悉的mixin的变量 - 但不是每个人都这样做。所以他们可能会进去输入：
@include button;
background-color: #444;
以获得浅灰色按钮。我希望能够警告调用mixin并且不提供变量的用户，"嘿，提供了一些你可能想要使用的变量！" - 这样，如果他们想覆盖默认值，他们可以用尽可能少的代码行来完成。
有谁知道 SASS 是否可以进行这种用户输入检查？
@mixin backdrop($color： #000) { ... }
@include 背景(#000);//不应该有警告@include背景;//警告
在mixin中，您无法再区分该值是由用户给出的还是使用默认值初始化的。解决此问题的一种方法是在 mixin 签名中设置一个默认值，该值不会被用户传入。在这一点上，我假设您希望允许用户通过使用 mixin 时显式设置为null的值来摆脱任何警告，以便使用默认值(换句话说：null是一个有效的用户输入来告诉 mixin 是的，我知道变量，但请使用默认值)。
然后，我们可以更改 mixin 签名以使用false作为初始默认值，以便我们可以在 mixin 中查看该值是否已设置。然后，在mixin中设置实际默认值，并且仅在用户未提供任何输入时使用。然后，代码可能如下所示：
@function warn-on-false($mixin, $value, $default) {
@if $value == false {
@warn "Hey, there's some variables provided ... see mixin: #{$mixin}.";
@return $default;
}
@else if $value == null {
@return $default;
}
@return $value;
}
@mixin button($background: false, $corner-round: false) {
background-color: warn-on-false("button()", $background, "#222");
border-radius: warn-on-false("button()", $corner-round, 5px);
}
.class {
@include button; // warns for $background and $corner-round
}
.class2 {
@include button("#444"); // warns for $corner-round
}
.class3 {
@include button(null, 5px); // no warning
}
控制台输出 (3x)：
WARNING: Hey, there's some variables provided ... see mixin: button().
on line 3 of style.scss, in `button'
from line 28 of style.scss`
CSS输出：
.class {
background-color: "#222";
border-radius: 5px;
}
.class2 {
background-color: "#444";
border-radius: 5px;
}
.class3 {
background-color: "#222";
border-radius: 5px;
}
然而，这只是一些思想的食粮，表明了这一点以及如何做到这一点。您还可以考虑修改 warn-函数，使其循环访问值列表，然后在每个 mixin 中调用它一次，并且每次 mixin 调用最多只收到一个警告(在上面，您会收到两个警告.class)。我要做的是在警告消息中向用户提供建议，并告诉如果应该使用默认值，null应该显式传递给 mixin。
我可以理解你想做什么，但我认为这实际上是不可能的。
你打算做的是CSS核心，以这种方式使用mixin本质上只是编写类的不同方式。
此外，每次使用@include时都会收到警告，这将非常冗长。