Sass - 检查用户输入的变量

Question

我正在构建一组常见的 SASS mixin。其中一些 mixin 有 5-10 个变量，所有变量都有默认值。我想要一种方法来检查用户是否有输入值 - 不是变量内容，而是是否有实际的用户输入。例如，在以下 mixin 中：

@mixin backdrop($color: #000) {
    background-color: $color;
}

如果用户在自己的代码中调用：

@include backdrop(#000);

应该有没有警告。即使他们输入了与默认值相同的值，但仍有用户输入，因此不需要@warn。但是，如果用户调用：

@include backdrop;

应该有一个警告，以确保用户知道可能的变量。

这对于具有更多变量的 mixin 更有用。例如，假设我的网站有一个标准按钮：

@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 进行？

Answer 1

@mixin 背景($color: #000) { ... }
@包括背景（#000）； // 应该没有警告
@include 背景； // 警告

在 mixin 中，您无法再区分该值是用户给出的还是使用默认值初始化的。解决此问题的一种方法是在 mixin 签名中设置一个不会被用户传入的默认值。在这一点上，我假设您希望通过在使用 mixin 时将值显式设置为 null 来允许用户摆脱任何警告，以便使用默认值（换句话说：null 是一个有效用户输入告诉混入是的，我知道变量，但请使用默认值）。

然后我们可以更改 mixin 签名以使用 false 作为 initial 默认值，以便我们可以在 mixin 中查看该值是否已设置。 actual 默认值随后在 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;
}

---

这只是一些思考的食物，显示了这一点以及如何做到这一点。您还可以考虑修改警告函数，使其遍历值列表，然后在每个 mixin 中调用一次，每次 mixin 调用最多只能收到一个警告（在上面，您会收到两个警告 @987654327 @)。我要做的是在警告消息中向用户提供建议，并告诉 null 如果应该使用默认值，则应该明确传递给 mixin。

Answer 2

我能理解你想要做什么，但我认为这实际上是不可能的。

您打算做的是CSS核心，以这种方式使用mixin本质上只是编写class的另一种方式。

每次使用 @include 时都会收到警告，这将非常冗长。