Save time by using SASS

This presentation is targeted to everyone interested in an easier way of creating and updating CSS for your websites. It shows the great benefits of using SASS/SCSS for design implementation.

With the usage of SASS you gain the possibility to write CSS while using variables, nesting of styles and other flexible techniques like the powerful mixins, selector inheritance, basic operations (e.g. numbers, colors) or interpolation.
The written code will be compiled into standard CSS and for meeting the different needs the output format can be configured e.g. compressed which will create a minified CSS file.

Transcript

1. Structured CSS with SASS and sassify Save time by using SASS
2. ▪ Frontend Developer, Certified TYPO3 Integrator at networkteam GmbH ▪ TYPO3 Phoenix Core Team Member ▪ TYPO3 Marketing Team Member Berit Jensen
3. CSS - The bad parts
4. Mixed up formatting
5. Duplication
6. Mixed up colors and dimensions
7. Long selectors
8. Imports are slow!
9. SASS SCSS
10. CSS SCSS will be compiled to CSS SCSS SCSS Compiler
11. You can simply copy existing CSS CSS SCSS
12. CSS Enhancements
13. CSS #header { ... } #header ul.menu li a { ... } #header ul.menu li { ... } li a { ... } #header ul.menu { ... } Nesting SCSS #header { ... ul.menu { ... li { ... a { ... } } li a { ... } refactor
14. CSS #header ul.menu li a { color: #000; } #header ul.menu li a:hover { color: #ccc; } Selector references SCSS #header { ul.menu { li { a { color: #000; &:hover { color: #ccc; } } } refactor
15. CSS #menu { ... border-left: solid 1px #c7c7c7; border-top: solid 1px #c7c7c7; border-right: solid 1px #c7c7c7; } #rootline { ... background-color: #c7c7c7; } #content { ... border-left: solid 1px #c7c7c7; border-top: solid 1px #c7c7c7; border-right: solid 1px #c7c7c7; } Variables SCSS $grey: #c7c7c7; $border-size: solid 1px; $border: $border-size $grey; #menu { ... border-left: $border; border-top: $border; border-right: $border; } #rootline { ... background-color: $grey; } #content { ... border-left: $border; border-top: $border; border-right: $border; } refactor
16. CSS #content { width: 500px; padding: 40px; } #sidebar { width: 100px; margin-left: 20px; } Calculations SCSS $total-width: 600px; $sidebar-width: 100px; $spacing: 20px; #content { width: $total-width - $sidebar-width; padding: $spacing * 2; } #sidebar { width: $sidebar-width; margin-left: $spacing; } refactor
17. Functions (predefined) SCSS $color: #777777; #content { background-color: darken($color, 20%); } h2 { color: lighten($color, 50%); } #content { background-color: #444444; } h2 { color: #f6f6f6; } compile
18. Functions http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html adjust_hue(color, degrees) complement(color) darken(color, amount) desaturate(color, amount) grayscale(color) lighten(color, amount) mix(color1, color2, weight) opacify(color, amount) saturate(color, amount) transparentize(color, amount) hsl(hue, saturation, lightness) hsla(hue, saturation, lightness, alpha) rgb(red, green, blue) rgba(red, green, blue, alpha) rgba(color, alpha) alpha(color) blue(color) green(color) hue(color) red(color) opacity(color) lightness(color) saturation(color) abs(value) ceil(value) floor(value) round(value) comparable(number1, number2) type_of(obj) percentage(value) unit(number) unitless(number) quote(str) unquote(str)
19. Mixins SCSS @mixin rounded-border { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .rounded-box { @include rounded-border; width: 250px; } #navigation { ul { li { @include rounded-border; } } } .rounded-box { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 250px; } #navigation ul li { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } CSS compile
20. Mixins with arguments SCSS @mixin rounded-border($radius) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } .rounded-box { @include rounded-border(4px); width: 250px; } #navigation { ul { li { @include rounded-border(2px); } } } .rounded-box { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 250px; } #navigation ul li { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } CSS compile
21. Real Imports SCSS $color = #cc7700; @import "a.scss"; @import "b.scss"; #inhalt { background-color: #663c00; } h2 { color: #cc7700; } CSS compile a.scss #inhalt { background-color: darken($color, 20%); } b.scss h2 { color: $color; }
22. Control structures / if SCSS $type: business; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == business { color: green; } @else { color: black; } } p { color: green; } CSS compile
23. Control structures / for SCSS @for $i from 1 through 3 { h#{$i} { font-size: 1em - (0.2 * $i); } } h1 { font-size: 0.8em; } h2 { font-size: 0.6em; } h3 { font-size: 0.4em; } CSS compile
24. Comments SCSS /* * Multiline CSS Comment */ body { color: black; } // One-line, internal comment a { color: green } /* * Multiline CSS Comment */ body { color: black; } a { color: green; } CSS compile
25. Installation & Usage
26. Installation ▪ RubyInstaller (http://www.ruby-lang.org/de/downloads/) ▪ Install the SASS Gem: sudo gem install sass --pre ▪ or the PHP version PHamlP (http://code.google.com/p/phamlp)
27. Watch your changes sass --watch imports.scss
28. Debugging
29. FireSass Firebug Extension sass -g imports.scss > imports.css
30. SASS Framework http://compass-style.org
31. sassify TYPO3 Extension based on PHamlP http://typo3.org/documentation/document-library/extension-manuals/sassify/1.0.1/view
32. Reality Check
33. Thank You!
34. Questions?