Save time by using SASS/SCSS

3,888 views
3,803 views

Published on

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.

For using SASS in your TYPO3 project right now the extension sassify is ready for editing and compiling SASS directly inside your TYPO3 installation.

Published in: Technology

Save time by using SASS/SCSS

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

×