SCSS 检查 CSS 自定义 var 属性

Question

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

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

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

我不在乎它的价值--my-custom-var是什么，只是想检查它的存在。

Answer 1

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

笔记：

• 我"null"在 my 里面使用$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;