sass - SCSS 检查 CSS 自定义 var 属性

Question

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

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

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

我不在乎 --my-custom-var 的值(value)是多少只是想检查它的存在。

Answer 1

Sass 引入了 variable-exists()功能已经在 alpha 中。请注意，Sass 只能检查 Sass 变量。因此如果 你真的想使用 CSS 变量，你需要在 Sass 变量中定义 CSS 变量的内容，例如 $sassVar: /* content */; --cssVar: $sassVar; .另请注意，@if语句必须在 @mixin 内或 @function去工作。我在下面发布了一个工作示例，但这里也是我的 Codepen Example因为 Stack 不编译 Sass。
备注 :

我用过 "null"在我的 $var这基本上表示有
是 否 此变量中的内容，您可以传递任何内容
希望它不会影响结果，除非您删除或更改实际
多变的。

您可以使用多个 @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;