First steps with Sass, compass using Assetic on Symfony2
So yesterday I migrated the CSS of a small Symfony2 project to Sass/compass. Getting used to it takes a while but is generally an easy and worthwhile experience.
The results are awesome!
I am sure I could draw even more benefit from this but so far I achieved the following.
- common colors are defined as variables with speaking names in one place
- my stylesheets now mimic the structure they apply to
- all my icons and such exist as separate files yet are compiled down to one single sprite image in production
- style definitions are now in separated in different .scss files by region on the page (sidebar, main, ..) and common elements (buttons, color definitions, ..) yet delivered as one single file .css file in production
- all my .scss files weight half as much kilobytes as the original .css file
- It makes sense to separate your style definitions into separate files.
- You should put common style guide informations like colors and recurring elements in one group of files
- and region specific stuff like dimensions and grid information into another group
- Write mixins for recurring definitions like button styles
- Combine mixins by using them as arguments to each other to make them smaller and more reusable
- Don’t use separate sprite maps for each context but only when you use different combinations on different pages
- Don’t glob all your .scss files with Assetic but use @import to preserve order (common things first then by region)
- If you use @import though even in dev environment nothing will be updated unless one of the files that Assetic knows has changed (it’s enough to touch them)
- Test often as the Sass/compass exceptions are rubbish!