I’ve been wanting to explore CSS pre-processors for several months and re-building this site seems like a good chance to get my feet wet. I’ve been following the debates between the two most popular pre-processors, Sass and LESS, and decided that for my purposes and experience, Sass would be a better fit.

Using a workflow that I learned in the Build Responsively Workshop, I wanted to create separate .scss partials for each of my breakpoints, then import them into my main stylesheet using media queries and @import statements within my main Sass stylesheet (style.scss). Normally I avoid @import statements in my CSS files (which would prevent stylesheets from being downloaded in parallel), but the compiled nature of Sass means that the only time these files are actually imported is when the actual CSS files are generated. Importing multiple Sass partials also a) keeps my styles organized better (with no performance hit) and b) allows me to easily re-use partials for alternative stylesheets.

Continue reading→