SCSS 检查 CSS 自定义 var 属性答案

【问题标题】：SCSS check for CSS custom var propertySCSS 检查 CSS 自定义 var 属性
【发布时间】：2020-07-24 18:47:14
【问题描述】：

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

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

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

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

【问题讨论】：

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

标签： sass css-variables

【解决方案1】：

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

注意：

我在我的$var 中使用了"null"，它基本上表示有是 no 在这个变量中的内容，你可以传递任何你希望它不会影响结果，除非您删除或更改实际变量。
您可以使用多个@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;

【讨论】：