SCSS 检查 CSS 自定义变量属性。

Question

如果存在--my-custom-var，我该如何有条件地应用一个mixin？例如：

.test {
  @if var(--my-custom-var) {
     @include someExampleMixin()
  }

  @if var(--another-custom-var) {
     @include someExampleMixin()
  }
}

我不关心--my-custom-var的值，只想检查它是否存在。

- cusejuice

---

如果这是可能的，我会感到惊讶。Sass不会对常规CSS变量进行任何评估。 - Sean

Answer 1

Sass已经在alpha版本中引入了variable-exists()函数。请注意，Sass只能检查Sass变量。因此，如果你确实想使用CSS变量，你需要在Sass变量中定义CSS变量的内容，例如：$sassVar: /* content */;--cssVar: $sassVar;。还要注意，@if语句必须在@mixin或@function内部才能工作。我在下面发布了一个可工作的示例，但这里也有我的Codepen示例，因为Stack不能编译Sass。

注意:

• 我在我的$var中使用了"null"，这基本上表达了这个变量中没有任何内容，你可以传递任何你想传递的，除非你删除或更改实际变量，否则它不会影响结果。
• 你可以在这个示例中注释掉多个@if语句，但是应该始终跟随一个@else语句。

$var: null;

:root {
  --someVar: $var;
}

@mixin checkForVariable {
  @if variable-exists(var){
    body {
      background-color: red;
    }
  }
  //  @if variable-exists() {
  //    ...
  //  }
  //  @if variable-exists() {
  //    ...
  //  }
  @else {
    body {
      background-color: blue;
    }
  }
}

@include checkForVariable;

- Simplicius