test.ical.ly | getting the web by the balls

Aug/11

17

First steps with Sass, compass using Assetic on Symfony2

4 Comments · Posted by Christian in The right tool

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
Yes the resulting .css file doesn’t vary much from the original in terms of file size but I can simply use a compressor like YUICompressor to minimize that. However it is important that the files in my maintenance have been reduced in size. The less lines of code to maintain the better!
Another thing to notice is that the nested structure of .scss files makes them considerably more readable than .css.
The above example is taken from the Sass homepage and only shows a glimpse of what is possible. You can navigate through your style definitions just like you browse through your markup now. This can speed up bug fixing and change immensely.

Lessons learned

  • 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!
I hope this can help some of you.

· · · · · ·



  • http://blog.nevalon.de gimler

    can you give some sample Code twig, config and how the sprites works

  • Frank

    @gimler
    I published my demo bundle, which i used for testing those tools: https://github.com/frastel/AcmeSassDemoBundle. Not very much to see, but i hope this helps anyway.

  • http://test.ical.ly Christian

    @Frank awesome, thanks for that!
    @gimler that should leave no questions right?

  • http://www.lunetics.com Matthias Breddin

    What about @imports in different bundles?

    For example i got a commonbundle and a userbundle.
    How should / can i import a “_base_colors.scss” file which resides in commonbundle into a scss file which resides in the userbundle?

<<

>>

Find it!

Theme Design by devolux.nh2.me
To top