TheBlackBenzKid TheBlackBenzKid - 7 months ago 52
Sass (Sass) Question

Can I update SASS variables in Media Queries?

Consider the following SASS code. I want to make sure that if the screen is above

then the
should be
and then it should change depending on size. However SASS does not allow me to update the variables inside the strings.

// Above 1250px

// Below 1250px
@media screen and (max-width:1250px){

// Below 950px
@media screen and (max-width:950px){

@media screen and (max-width:850px){

@media screen and (max-width:750px){

// Render the correct code
.page-template {margin-top:$pageTemplateMargin}

Is there a better way for this, as it does not work and
stays at



No, you can't.

I'd suggest using mixins to work with this:

@mixin pageTemplateMargin($px) {
    margin-top: $px

@media screen and (max-width:1250px) {
    .element { @include pageTemplateMargin(10px);}
@media screen and (max-width:1000px) {
    .element { @include pageTemplateMargin(15px);}
@media screen and (max-width:800px) {
    .element { @include pageTemplateMargin(20px);}

There's also a way of mapping through sass objects, such as:

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

@media screen and (max-width:1200px) {
    .element { margin-top: map-get($breakpoints, 1200);}
@media screen and (max-width:1000px) {
    .element { margin-top: map-get($breakpoints, 1000);}
@media screen and (max-width:800px) {
    .element { margin-top: map-get($breakpoints, 800);}

This would allow you to globally change the margin by adjusting 1 variable.

Working codepen example