Sass - 检查用户输入的变量 [英] Sass - check variable for user input

问题描述

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

I'm working on building out a set of common SASS mixins. Some of these mixins have 5-10 variables, all with default values. I'd like a way to check whether a user has input values - not the variable contents, but whether there has been an actual user input. For example, in the following mixin:

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

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

If a user, in their own code, calls:

@include backdrop(#000);

应该没有警告.即使他们输入了与默认值相同的值，仍然有用户输入，所以不需要@warn.但是，如果用户调用:

There should be no warning. Even though they have input the same value as the default, there is still a user input, so @warn is not required. However, if the user calls:

@include backdrop;

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

There should be a warning, to ensure the user knows about the possible variables.

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

This is a lot more useful for mixins with more variables. For example, let's say I have a standard button for my site:

@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 中的变量 - 但不是每个人都这样做.所以他们可能会进入并输入:

A user could input @include button; and they'd get a dark grey button with white text and 5px rounded corners. Often, if someone is using a mixin like this, which they didn't write themselves, they might assume - seeing @include button; used elsewhere in the code - that there were no variables. And I know best practice is to check an unfamiliar mixin for variables - but not everyone does this. So they might go in and type:

@include button;
background-color: #444;

获得一个浅灰色按钮.我希望能够警告调用 mixin 且未提供任何变量的用户，嘿，提供了一些您可能想要使用的变量！"- 这样，如果他们想覆盖默认值，他们可以使用尽可能少的代码行来完成.

to get a lighter grey button. I'd like to be able to warn a user who calls the mixin and provides no variables that, "Hey, there's some variables provided that you might want to use!" - that way, if they want to override the defaults, they can do it with as few lines of code as possible.

有人知道 SASS 是否可以进行这种用户输入检查吗?

Does anyone know if this kind of user-input check is possible with SASS?

推荐答案

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

@mixin backdrop($color: #000) { ... }
@include backdrop(#000); // there should be no warning
@include backdrop; // warning

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

Within the mixin you can't distinguish anymore if the value is given by the user or initialized with the default value. A way to solve this issue is to set a default value within the mixin signature that won't get passed in by the user. At this point I assume that you want to allow a user to get rid of any warnings by explicitly setting a value to null when using the mixin so that the default value is used (in other words: null is a valid user input to tell the mixin Yes, I'm aware of the variables but please use the default value).

然后我们可以更改 mixin 签名以使用 false 作为初始默认值，以便我们可以在 mixin 中查看该值是否已设置.actual 默认值然后在 mixin 中设置，并且仅在用户未提供任何输入时使用.代码可能如下所示:

We can then change the mixin signature to use false as initial default value so that we can see within the mixin if the value has been set or not. The actual default value is then set within the mixin and used only if the user has not provided any input. The code could then be like the following:

@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 调用最多只能收到一个警告(在上面，您会收到两个警告 .class).我会做的是在警告消息中向用户提供建议，并告诉 null 如果应该使用默认值，应该明确地传递给 mixin.

---

This is yet just some food for thoughts that shows that and how it could be done. You could also think about modifying the warn-function so that it loops over a list of values, you call it then once within every mixin and only get a maximum of one warning per mixin call (in the above you get two warnings for .class). What I would do is to give advice to the user in the warning message and tell that null should explicitly be passed to the mixin if the default value should be used.

这篇关于Sass - 检查用户输入的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！