Using media with variables

[Gabriel Baker]

We're trying to use variables as we do some calcs with this later, but this doesn't seem to work, it just uses the original value

$width: 390px;
@include media("<desktop") {
  $width: 320px;
}

any hints would be appreciated!

[Gabriel Baker]

Top level variables are global in the module, those in braces are local, so within the media query we need to say we're overriding the global value

$width: 390px;
@include media("<desktop") {
  $width: 320px !global;
}

[Gabriel Baker]

Haha I'm actually reopening this, when using the above solution what actually happens is the variable inside the media is always being detected, so in my example the width variables is always 320 regardless of size

[Jack McNicol]

@gabriel403 not quite sure on your desired output. But css variables are quite powerful and well supported now. CSS variables work like normal css properties (work within the cascade) Where as scss/sass variables would only work for that block at compile time.

:root {
  --bg-color: red;
}

@include media("<desktop") {
 :root {
    --bg-color: blue;
  }
}

.my-element {
  background-color: var(--bg-color);
}

See codepen - https://codepen.io/jackmcpickle/pen/zYmbLyL