StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSass compilation on Mac
text
Body
copied!<p>I'm just getting started with Sass. I'm translating an old stylesheet that I had kicking around into Sass to compare the resulting CSS with my own hand coded CSS. The original stylesheet is from a responsive site, so I've been writing media queries in this way:</p> <pre><code>article font-family: Arial, sans-serif font-size: 14px margin-bottom: 25px h1 font-size: 18px line-height: 35px sup font-size: 10px section h1 font-family: Georgia, serif font-size: 16px @media only screen and (max-width: 960px) font-size: 20px p margin-bottom: 10px footer text-align: right @media only screen and (max-width: 960px) margin: 0 a font-size: 10px @media only screen and (max-width: 960px) @include iphoneMargin </code></pre> <p>The problem I have with this is the resulting compiled CSS has media queries separated out and looks something like this:</p> <pre><code>/* line 48, styles.sass */ article { font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 25px; } /* line 52, styles.sass */ article h1 { font-size: 18px; line-height: 35px; } /* line 55, styles.sass */ article h1 sup { font-size: 10px; } /* line 58, styles.sass */ article section h1 { font-family: Georgia, serif; font-size: 16px; } @media only screen and (max-width: 960px) { /* line 58, styles.sass */ article section h1 { font-size: 20px; } } /* line 63, styles.sass */ article section p { margin-bottom: 10px; } /* line 65, styles.sass */ article footer { text-align: right; } @media only screen and (max-width: 960px) { /* line 65, styles.sass */ article footer { margin: 0; } } /* line 69, styles.sass */ article footer a { font-size: 10px; } @media only screen and (max-width: 960px) { /* line 48, styles.sass */ article { margin: 0 10px; } } </code></pre> <p>Even when using compressed mode each separate selector is put into it's own media query, which isn't very efficient. I really like being able to nest the media queries in Sass as it helps to see exactly what it is that's being changed between the versions of the site.</p> <p>(I've left the compiler in dev mode here, it does remove the comments in production mode, which I thought was a cute touch. Certainly helps to trace in Sass where the CSS is coming from.)</p> <p>Is the compilation of the media queries in this way a limitation of the compiler or Sass? Is it handled better when using Compass or another compiler? It would be a shame to have to ignore this ability of preprocessing just because the resulting code is inefficient.</p> <p>Thanks in advance</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload