在@if scss 中使用 css 变量

Question

在创建样式期间，我有一个想法，即创建一个 CSS 变量，该变量代表 boolean 值是否显示透明度，但我看到该条件，不幸的是，不起作用！

主.css

:root {
    --navbar-transparent: "true";
  }

navbar.component.scss

@if var(--navbar-transparent) == "true" {
.nav-booking {
    position: absolute;
    width: 100%;
    background: transparent;
    padding-top: 20px;
  }
} @else {
.nav-booking{
    border-bottom: 2px solid #d6d1d180;
 }
}

有没有办法用 css 变量来做到这一点？ 或者这是不可能的！

Answer 1

您可以像下面一样破解if() {}但我怀疑您是否可以执行if() {} else {}

 * { --navbar-transparent: true; }.nav-booking { /* if:true */ padding,var(--navbar-transparent;20px): border,var(--navbar-transparent;5px solid green): /* */ background;red: height;10px: margin;10px; }

 <div class="nav-booking" ></div> <:-- you need to set "initial" to get your false --> <div class="nav-booking" style="--navbar-transparent:initial"></div>

与使用initial值有关的获取模式详细信息

如何在 CSS 变量（又名自定义属性）中存储继承值？

CSS 框 model 的自定义属性（变量）

Answer 2

在 sass 中，自定义属性不幸被视为字符串，它不关联值。

但是有一些解决方法：

@function get($var) {
  @return map-get($custom-properties, $var);
}

$custom-properties: ();

@each $key, $value in $custom-properties {
  :root {
    --#{$key}: #{$value};
  }
}

添加要在 Sass 项目中使用的任何变量，并且还可以编译为自定义属性，到此 map: $custom-properties: (); .

$custom-properties: (
  'navbar-transparent': true,
  //...
);

现在使用get($var)访问 Sass 项目中的变量。

@function get($var) {
  @return map-get($custom-properties, $var);
}

$custom-properties: (
  'navbar-transparent': true,
);

@each $key, $value in $custom-properties {
  :root {
    --#{$key}: #{$value};
  }
}

@if (get(navbar-transparent)) {
  .nav-booking {
    position: absolute;
    width: 100%;
    background: transparent;
    padding-top: 20px;
  }
} @else {
  .nav-booking{
    border-bottom: 2px solid #d6d1d180;
  }
}

这将编译为：

:root {
  --navbar-transparent: true;
}

.nav-booking {
  position: absolute;
  width: 100%;
  background: transparent;
  padding-top: 20px;
}

https://codepen.io/LudwigGeorgImmanuel/pen/dypaXyE