Smart CSS theming with Sass and Compass

Smart CSS theming with Smart CSS theming with Sass and CompassSass and Compass

Mihaela JurkovićMihaela Jurković

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 CSSSMURF – Scalable, Modular, re**U**sable Rails Frontends)

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)

!

prkos.hr

Variables

● Naming conventions – pick one and stick with it

prkos.hr

Variables

● Should you use descriptive or functional names?

prkos.hr

Variables

● Combine descriptive with functional variable names!

prkos.hr

Variables

● After adding a new color palette only the variables with functional names needs to be changed

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

prkos.hr

Mixins – buttons

prkos.hr

Mixins – vignette

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/

prkos.hr

Easy icons with Mixins and icon fonts – fontawesome

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”

prkos.hr

Many other Sass features

● Functions (adjusting colors, numbers, lists...)● Control directives (@if, @for, @while...)● Define your own functions● ...

prkos.hr

Compass – Sass library

● Compass Core Framework | Compass Documentation http://compass-style.org/reference/compass/

● Sass Resources and Referencehttp://sass-lang.com/

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...

prkos.hr

Crazy Sass text shadows

● Sassy Mother Effing Text Shadowhttp://sassymothereffingtextshadow.com/

prkos.hr

Crazy Sass text shadows

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

prkos.hr

Thank you!

Mihaela Jurković

mihaela@prkos.hr

Skype: mihaela-prkos