Structured CSS with SASS and sassify

Save time by using SASS

■ Frontend Developer, Certified TYPO3 Integrator at networkteam GmbH

■ TYPO3 Phoenix Core Team Member

■ TYPO3 Marketing Team Member

Berit Jensen

CSS - The bad parts

Mixed up formatting

Duplication

Mixed up colors and dimensions

Long selectors

Imports are slow!

SASSSCSS

CSS

SCSS will be compiled to CSS

SCSS

SCSS

Compiler

You can simply copy existing CSS

CSS SCSS

CSS Enhancements

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

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

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;}

VariablesSCSS

$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

CSS

#content { width: 500px; padding: 40px;}#sidebar { width: 100px; margin-left: 20px;}

CalculationsSCSS

$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

Functions (predefined)

SCSS

$color: #777777;

#content { background-color: darken($color, 20%);}h2 { color: lighten($color, 50%);}

#content { background-color: #444444; }

h2 { color: #f6f6f6; }

compile

Functionshttp://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)

MixinsSCSS

@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

Mixins with argumentsSCSS

@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

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;}

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

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

Comments

SCSS

/* * Multiline CSS Comment */body { color: black; }

// One-line, internal commenta { color: green }

/* * Multiline CSS Comment */body { color: black; }

a { color: green; }

CSS

compile

Installation & Usage

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)

Watch your changes

sass --watch imports.scss

Debugging

FireSassFirebug Extension

sass -g imports.scss > imports.css

SASS Frameworkhttp://compass-style.org

sassifyTYPO3 Extension based on PHamlP

http://typo3.org/documentation/document-library/extension-manuals/sassify/1.0.1/view

Reality Check

Thank You!

Questions?