在@if scss 中使用 css 变量

Question

during the creation of style, I have had an idea of creating a CSS variable that represents the boolean value to display or not the transparency but I saw that the condition, unfortunately, does not work!

main.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;
 }
}

is there a way to do this with css variables? or it's impossible !

Answer 1

You can hack an if() {} like below but I doubt you can do an 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>

Related to get mode detail around the use of initial

How to store inherit value inside a CSS variable (aka custom property)?

CSS custom properties (variables) for box model

Answer 2

In sass custom-properties are unfortunately just treated as a string, it doesn't associat a value.

However there are workarounds:

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

$custom-properties: ();

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

Add any variable, you want to use within your Sass project and also be compiled to a custom-property, to this map: $custom-properties: (); .

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

Now use get($var) to acces said variables within your Sass project.

@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;
  }
}

This will compile to:

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

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

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