如何检查 CSS 变量值是不是等于另一个值

Posted 2023-03-14

【中文标题】如何检查 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;

【问题讨论】：

***.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;