如何在scss中使用if else条件答案

【问题标题】：how to use if else conditions in scss如何在scss中使用if else条件
【发布时间】：2018-03-22 06:05:57
【问题描述】：

我在 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;
}

如何解决这个问题？

【问题讨论】：

标签： javascript css sass

【解决方案1】：

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

一个简短的例子：

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

这仅适用于 Sass > 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 支持是否对您至关重要。

【讨论】：