Using Sass Variables with CSS3 Media Queries

by

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

More Related Contents:

  1. False positive “undefined variable” error when compiling SCSS
  2. Adding a unit to a number in Sass
  3. Sass .scss: Nesting and multiple classes?
  4. Sass – Manipulate inherited property?
  5. Append the parent selector to the end with Sass
  6. Sass Interpolation of Mixin, Function, and Variable names
  7. Why does Sass change the format of my colors?
  8. How to overwrite SCSS variables when compiling to CSS
  9. Can I import an externally hosted file with sass?
  10. Using a function in Sass is returning the string containing the name of the function rather than the result
  11. Math with interpolated variables?
  12. Sass combining parent using ampersand (&) with type selectors
  13. Extending selectors from within media queries with Sass
  14. Define variables in Sass based on classes
  15. Sass calculate percent minus px
  16. How to create new breakpoints in bootstrap 4 using CDN?
  17. Using variables for CSS properties in Sass
  18. Sass color variable not working inside darken()
  19. How to convert a number to a percentage with SASS? [duplicate]
  20. Skipping an optional argument in Sass mixin
  21. Can’t get sass + compass + susy installed due to version conflict
  22. How to control number of items per row using media queries in Flexbox?
  23. Adding two values in Sass function creates double instance of ‘px’
  24. Interpolation of prefixes on @keyframes in Sass
  25. Is it possible to reference a further parent than just the one above?
  26. webpack (with sass-loader) – scss file @import does not recognize resolve alias
  27. SASS compile fontawesome preserve notation
  28. Trying to use sass modules in create-react-app with the new @use syntax but receiving an error
  29. Unexpected results when using @extend for themes
  30. Styling a specific set of input types in a reusable way with Sass

Leave a Comment