How to Update SASS Variables in Media Queries

Using Sass Variables with CSS3 Media Queries

This is simply not possible. Since the trigger @media screen and (max-width: 1170px) happens on the client-side.

Achieving your expected result would only be possible if SASS grabbed all rules and properties in your stylesheet containing your $base_width variable and copied/changed them accordingly.

Since it won't work automatically you could do it by hand like this:

@media screen and (max-width: 1170px)
      $base_width: 960px // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $base_width e.g.
      #wrapper
          width: $base_width
          ...

@media screen and (min-width: 1171px)
    $base_width: 1160px
      #wrapper
          width: $base_width
          ...

This is not really DRY but the best you can do.

If the changes are the same every time you could also prepare a mixin containing all the changing values, so you wouldn't need to repeat it. Additionally you can try to combine the mixin with specific changes. Like:

@media screen and (min-width: 1171px)
    +base_width_changes(1160px)
    #width-1171-specific-element // additional specific changes, that aren't in the mixin
        display: block

And the Mixin would look like this

=base_width_changes($base_width)
    #wrapper
        width: $base_width

Can I update SASS variables in Media Queries?

I agree with the accepted answer that it's better to use maps in this case but I want to point out a couple of things.

Variables can actually be updated inside of media queries. The problem is that a variable defined outside of a block is a global variable while one defined within a block is a local variable. You can let sass treat a variable within a block as a global variable using the !global keyword.

$pageTemplateMargin:750px;

@media screen and (max-width:1250px){
    $pageTemplateMargin: 550px !global;
}

.page-template {
  margin-top: $pageTemplateMargin //will use 550px instead of 750px
}

Just want to clarify that it is possible albeit it is not appropriate in this use case.

I also suggest using a loop for your code which will prove helpful especially if you add more screen widths and margin properties so you don't need to further write more media queries.

$breakpoints: (
  1200px: 10px,
  1000px: 15px,
  800px: 20px,
);

@each $width, $margin in $breakpoints {
  @media screen and (max-width: $width) {
    .element {
      margin-top: $margin;
    }
  }
}

Hope this helps.

Using media-queries to set variable values using Sass

This is an unusual instance of a common mistake: you are mixing server-side and client-side logic.

The @media (min-width: 750px) { ... } block is a directive which is passed onto the web browser to evaluate at run time, and conditionally apply rules. As you resize the browser window or viewport, the browser will continuously re-check this condition, and decide whether to apply the CSS rules it contains.

The $var: deskConfig; assignment, on the other hand, is a directive to the SASS/SCSS compiler. This runs over the entire file, processes it, and returns the result, which will probably be saved to disk, and served to every browser which visits. The compiler cannot know what size window someone will browse the site in.

The only thing SASS can do with @media queries is decide where to echo them in the resulting CSS. For instance, you can nest things "inside out", like .foo { @media(min-width: 750px) { color: red; } }, and SASS will generate the correct CSS @media(min-width: 750px) { .foo { color: red; } }.

I guess it would theoretically be possible for the compiler to detect that the assignment was in an @media block, and generate two versions of every single rule which mentioned that variable, so that .foo { color: $var; } automatically became .foo { color: red; } @media(min-width: 750px) { .foo { color: red; } }. But that would be incredibly complicated, and frankly rather confusing.

Why SCSS variable is not changing value on media query?

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

Changing variable value based on media query

This is impossible, variables are assigned values when the Sass is compiled to CSS.

what you can do is this:

$avatar_size: 200px;

$avatar_tablet: 150px;

$avatar_mobile: 100px;

@media (#{$tablet_size}) {

  img {

    width: $avatar_tablet;

    height: $avatar_tablet;

  }

}

@media (#{$mobile_size}) {

  img {

    width: $avatar_mobile;

    height: $avatar_mobile;

  }

}

SASS variable with @media in css not working

Found the solution:

variables.scss:

$large-screen: 1200px;
$screen-large: ($large-screen - 1);  // Now it no longer interpolates to a string.
$large-down: 'screen and (max-width: #{$screen-large})';

In another scss file:

@import '../../styles/variables.scss';
@media #{$large-down} {
    my styling…
}