Smart CSS theming with Sass and Compass
- 1. Smart CSS theming withSmart CSS theming with Sass and CompassSass and Compass Mihaela JurkovićMihaela Jurković
- 2. prkos.hr Splitting code across files ● A variety of different strategies ● Pick one and stick to it! ● SMACSS + SASS popular (SMACSS – Scalable and Modular Architecture for CSS SMURF – Scalable, Modular, re**U**sable Rails Frontends)
- 3. prkos.hr Nesting rules ● Never nest more than 3(?) levels deep ● Indent, don't nest! (Indenting relies on HTML structure too much, it's too specific and it isn't reusable) !
- 4. prkos.hr Variables ● Naming conventions – pick one and stick with it
- 5. prkos.hr Variables ● Should you use descriptive or functional names?
- 6. prkos.hr Variables ● Combine descriptive with functional variable names!
- 7. prkos.hr Variables ● After adding a new color palette only the variables with functional names needs to be changed
- 8. prkos.hr Mixins ● Mixins are sets of CSS declarations ● You can pass arguments to them (optional but super useful) ● For best results – develop a strategy
- 11. prkos.hr Easy icons with Mixins and icon fonts ● Font Awesome (designed for Bootstrap) http://fortawesome.github.io/Font-Awesome/ ● The Entypo Pictogram Suite – http://www.entypo.com/ ● Typicons – http://typicons.com/ ● Modern Pictograms – http://modernpictograms.com/
- 12. prkos.hr Easy icons with Mixins and icon fonts – fontawesome
- 13. prkos.hr Mixins vs. @extend vs. %placeholders ● Mixin declarations are repeated in compiled CSS when applied to different selectors ● @extend groups selectors so declarations aren't repeated ● %placeholder syntax (new in Sass 3.2) – “Silent classes”
- 14. prkos.hr Many other Sass features ● Functions (adjusting colors, numbers, lists...) ● Control directives (@if, @for, @while...) ● Define your own functions ● ...
- 15. prkos.hr Compass – Sass library ● Compass Core Framework | Compass Documentation http://compass-style.org/reference/compass/ ● Sass Resources and Reference http://sass-lang.com/
- 16. prkos.hr Grids based on Sass ● No extraneous markup <div class="grid_2 mq1_grid_6 mq2_grid_8 mq2_push_3 mq3_grid_7 mq3_pull_4"></div> ● Easy responsiveness ● Saves a lot of time spent on CSS layouts ● Zen grids, Susy grid...
- 17. prkos.hr Crazy Sass text shadows ● Sassy Mother Effing Text Shadow http://sassymothereffingtextshadow.com/
- 18. prkos.hr Crazy Sass text shadows
- 19. prkos.hr Conclusion ● Sass and Compass is the future of CSS ● Learn CSS first! ● If you're not using Mixins you're not reaping the benefits
- 20. prkos.hr Thank you! Mihaela Jurković [email protected] Skype: mihaela-prkos