2

Using SASS, I can do this

.foo {
  width: 100%;
  @media (max-width: 1200px) {
    width: 1000px;
  }
}

Compiles to:

.foo {
  width: 100%;
}
@media (max-width: 1200px) {
  .foo {
    width: 1000px;
  }
}

Ok, but I also have this code compiled:

.bar {
  padding: 10px 0;
}
@media (max-width: 1200px) {
  .bar {
    padding: 50px 0;
  }
}

Note that the @media (max-width: 1200px) are repeated and will be repeated throughout the code many times... So, how to gathers the equal media queries in the same place? Like this:

.foo {
  width: 100%;
}
@media (max-width: 1200px) {
  .foo {
    width: 1000px;
  }
  .bar {
    padding: 50px 0;
  }
}
Shankar Cabus
  • 9,302
  • 7
  • 33
  • 43
  • I don't think SASS can do this alone. I would look into integrating either grunt or gulp in your workflow, and using a task like https://www.npmjs.org/package/grunt-combine-media-queries or https://www.npmjs.org/package/gulp-combine-media-queries to automate this for you. – Steve Sanders Nov 04 '14 at 19:47
  • Also, according to this question (http://stackoverflow.com/questions/11626174/is-there-an-advantage-in-grouping-css-media-queries-together/15643765#15643765) the performance impact of the repeated media queries is minimal. – Steve Sanders Nov 04 '14 at 19:49
  • 1
    You could also use the `css-condense` module or the `grunt-cssc` (just a grunt wrapper for the module mentioned) – Rafael Verger Nov 04 '14 at 20:19

0 Answers0