Question

我正在努力构建一套常见的SASS mixins。其中一些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

我能理解你想要做什么，但我认为这不可能。

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

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

Answer 2

@mixin背景（$ 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-function，使其循环遍历值列表，然后在每个mixin中调用一次，每次mixin调用最多只能获得一个警告（在上面你会得到两个警告{{ 1}}）。我要做的是在警告消息中向用户提供建议，并告诉.class如果应该使用默认值，则应该明确地将null传递给mixin。

Sass - 检查用户输入的变量

2 个答案: