Download - Save time by using SASS/SCSS
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
sassifyTYPO3 Extension based on PHamlP
http://typo3.org/documentation/document-library/extension-manuals/sassify/1.0.1/view
Reality Check
Thank You!
Questions?
