Embed Size (px)
Citation preview
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ć
Skype: mihaela-prkos
