如何检查 CSS 变量值是否等于另一个值答案

【问题标题】：How to check a CSS variable value equals another value如何检查 CSS 变量值是否等于另一个值
【发布时间】：2021-03-28 03:54:57
【问题描述】：

如何检查 CSS 变量是否等于某个值。

default.scss

:root {
    --default-direction: ltr; 
}

right.scss

:root {
   --default-direction: rtl; 
}

我想根据这个 CSS 变量值在 main.scss 中添加一些案例。我想要类似下面的代码sn-p。是否可以检查变量值以及如何检查？

main.scss

@if(var(--default-direction) == rtl) {
   $flex-direction: row-reverse;
}

【问题讨论】：

stackoverflow.com/questions/1129699/…
没有帮助，因为我需要这个检查只有 scss 没有任何服务器端支持。
选择器本身在某种程度上是条件，如果它匹配-> 应用规则。但是您尝试做的事情似乎要简单得多，如果方向是 rtl ，您想反转流程吗？在这种情况下，将静态方向设置为您的弹性框。所以无论 var() 值是什么，它始终保持在同一个方向上。
我想根据方向定义一些 scss 变量。由于方向会根据国家/地区选择动态变化，因此我想更改 scss 变量值并将其用于不同组件的所有范围样式。这就是为什么在这种情况下需要进行条件检查。

【解决方案1】：

我是如何为 rtl 创建混合规则的：

@mixin rtl {
    body:lang(ar) &{
      @content;
    }
  }

使用该 mixin，您可以开始创建规则：

.flexbox {
  flex-direction: row-reverse;
    @include rtl {
  flex-direction: row-reverse;
  }
}

【讨论】：