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.

1. Save time by using SASS
Structured CSS with SASS and sassify

2. Berit Jensen
■ Frontend Developer,
Certified TYPO3 Integrator
at networkteam GmbH
■ TYPO3Phoenix Core
Team Member
■ TYPO3Marketing Team
Member

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. Compiler
SCSS
SCSS
CSS
SCSS will be compiled to CSS

11. CSS SCSS
You can simply copy existing CSS

12. CSS Enhancements

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. #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. $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. $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. $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. Functions
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
adjust_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. @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. @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. $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. $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. @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. /* /*
* Multiline CSS Comment compile * Multiline CSS Comment
*/ */
body { color: black; } body {
color: black; }
// One-line, internal comment
a { color: green } a{
color: green; }
SCSS CSS
Comments

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. sass --watch imports.scss
Watch your changes

28. Debugging

29. sass -g imports.scss > imports.css
FireSass
Firebug Extension

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?