Question

我在scss中定义了以下变量

:root {
  --color-in: none;
  --color-out: none;
}

我是从javascript设置他们的值。

如果他们没有未定义的话，我怎么能写出if else条件，那么就这样做吧。我尝试了以下代码，但它无效。

@if var(--color-in) && var(--color-out) {
  background:
  linear-gradient(to left, transparent, rgba(255,255,255,.5)),
  linear-gradient(to left, var(--color-in), var(--color-out));
} @else {
  background-color: currentColor;
}

如何解决这个问题？

Answer 1

不确定，如果这是您想要的，但如果您使用“普通”变量，则可以使用@if variable-exists(...)。

一个简短的例子：

$color_in: #ff0000;
[...]
@if variable-exists($color_in)
    /* do stuff */
@else
    /* do other stuff */

这只适用于Sass＆gt; 3.2.x，对于早期版本，你需要使用一个mixin来设置带有!default标志的东西。

更多关于@if和这样的东西：http://thesassway.com/intermediate/if-for-each-while

修改我刚刚意识到，这可能根本不是你想要的。 IMO你想要的是不可能的。 Sass被编译为CSS，在编译时，会有一个状态。当Javascript更改该状态时，您必须在浏览器中再次将Sass代码重新编译为CSS（这在理论上是可行的）。要了解CSS变量和Sass / SCSS变量的区别，请查看：https://css-tricks.com/difference-between-types-of-css-variables/

我建议您使用Javascript在body元素上设置CSS类，每种颜色都有一个类。你可以在Sass中定义一个颜色数组及其名称并在其上循环，以生成所有需要的类！

要考虑的另一件事：Internet Explorer不支持CSS变量（https://www.caniuse.com/#search=css%20variables）。根据您所看到的统计数据，IE的市场份额仍为2％-14％。查看您自己的用户统计信息，以确定IE支持对您是否至关重要。

如何在scss中使用if else条件

1 个答案: