The document discusses using SASS for structured CSS to improve code organization and efficiency in frontend development. It covers various SASS features, such as nesting, variables, mixins, and control structures, highlighting the benefits of refactoring traditional CSS practices. Additionally, it provides installation instructions and resources for further learning about SASS and its integration with TYPO3.

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?