We'll respond shortly.
For my first blog post at Pivotal, I decided to pick a small topic that I am pretty confident about: why to structure your SASS files with the @import rule.
If you are still using Sprockets directives in Asset Pipeline to combine your SASS files, I highly recommend to switching over to using the SASS @import rule instead.
Consider this simple CSS setup:
application.css (using Sprockets Directives)
/* *= require partials/variables *= require partials/typography *= require partials/elements *= require vendor/grid *= require vendor/mixins *= require pages/home *= require pages/listing *= require pages/detail */(NOTE: I am intentionally not using "*= require_tree" right now.)
The same setup using SASS @import rule would look like this:
application.sass (using SASS @import)
@import partials/variables @import partials/typography @import partials/elements @import vendor/grid @import vendor/mixins @import pages/home @import pages/listing @import pages/detail
The main advantages come from the fact that SASS @import creates a global namespace, while the Sprockets directives do not.
Using the Sprockets Directives method, working in the ‘pages/home.sass’ file, you have to do this:
home.sass (using Sprockets method)
@import partials/variables @import partials/typography @import vendor/mixins .home-layout color: CornflowerBlue
While, using the SASS @import method, you don’t need to re-@import at all. All files @import’ed lower in the order already have access to all the variables and mixins defined in the files loaded above it in application.sass.
Some may not call this a “problem”, but aside from being annoying to do every time, there also a more serious problem; any file that contains renderable CSS (anything excluding variables, placeholders and mixin definitions) will be rendered every time it is @import’ed. This can quickly grow your final CSS output (I’ve seen some minified CSS > 1MB because of this error) and create a mass of duplicate selectors, putting undue load on the browser.
And in CAPS on the sass-rails gem readme:
Thanks for reading!