Set variables using media query

[aembleton]

I would like to be able to set variables using media queries. This would mean that with the following input:

@media (max-width: 300px) {
  $padding: 4px;
}

@media (max-width: 600px) {
  $padding: 10px;
}

div.content {
  padding: $padding;
}

I would expect the following output:

@media (max-width: 300px) {
  div.content {
    padding: 4px;
  }
}

@media (max-width: 600px) {
  div.content {
    padding: 10px;
  }
}

This would provide a convenient way of setting variables based on screen width without largely repeating ourselves with the rest of the CSS code that must be written.

[nex3]

While this would be pretty cool, it's very much contrary to the existing semantics of a Sass stylesheet. What you've outlined already has a meaning: it sets the variable twice in sequence and then accesses it (modulo some scoping issues). The sequential and largely imperative nature of Sass means that the sort of automatic duplication of rules you're describing becomes very complex. We actually considered something very similar for handling SassScript &, and ended up realizing that it was effectively impossible to do so and preserve the existing semantics.

The best approximation you can do right now is to put the styles that need to vary in a mixin with parameters and include that in your media queries.

[bahuma20]

@nex3
What if sass would detect automatically, where the variable is used and writes the new calculated properties into that media query?

For example:

$container-width: 980;
$right-column-width: 200;

div#contentwrapper {
  width: $container-width + px;

  div.left {
    width: $container-width - $right-column-width + px;
}

@media (max-width: 300px) {
  $container-width: 1140;
}

At compiling sass detects where the variable $container-width is used and compiles to:

div#contentwrapper {
  width: 980px;
}
div#contentwrapper div.left {
  width: 780px;
}
@media (max-width: 300px) {
  div#contentwrapper {
    width: 1140px;
  }
  div#contentwrapper div.left {
    width: 940px;
  }
}

[dumplingsol]

+1 for this

[hparton]

+1 for this

[rizqinizamil]

+1 for this