Can I update SASS variables in Media Queries?

Question

Consider the following SASS code. I want to make sure that if the screen is above 1250px then the margin-top should be 750px and then

Answer 1

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.