Why SCSS variable is not changing value on media query?

Question

Want to change my variable value on media queries but the value doesn't change at all. Why is that?

I tried to simple change the value on the media query but nothing happens.

// My variables
// All these variables works outside the media queries

$marq-width: 80vw; // using this one
$marq-height: 20vh;
$marq-elm-displayed: 5;
$marq-elements: 9;
$marq-elm-width: calc( #{$marq-width} / #{$marq-elm-displayed} );
$marq-animation-duration: calc(#{$marq-elements} * 3s);
$color: black;
$break-md: 600px;


// Here is my problem

@media(max-width: 600px) {
  body {
    background: red; // this works
  }

  $marq-width: 100vw; // this not work

}

Here is my codepen link: https://codepen.io/G-ROS/pen/JjPzovR?editors=0100

You can shrink the viewport on <= 600px and see the background changing to red but the variable did not changes at all. I expect the variable changes has the value "100vw", but it remains with the original value of "80vw".

This is not how SASS/SCSS works. When it compiles to CSS, it doesn't know there is a media query, it's simply trying to set the **value** of a variable to a _property_. You will need to look into a `mixin`. — disinfor, Sep 25 '19 at 04:06
Possible duplicate of [Sass - Changing variable value based on media query](https://stackoverflow.com/questions/48372006/sass-changing-variable-value-based-on-media-query) — disinfor, Sep 25 '19 at 04:07

score 2 · Accepted Answer · answered Sep 25 '19 at 05:03

You are missing to define width you define the variable but not width.

chnaging only variable will not impact on css you will use that variable to such css like below.

@media(max-width: 600px) {
  body {
    background: red; // this works
  }

  $marq-width: 100vw; // this will not work
  .marquee{width:$marq-width;}  // this works

}

Check the codepen

Why SCSS variable is not changing value on media query?

1 Answers1