Save time by using SASS/SCSS

Save time by using SASS Structured CSS with SASS and sassify

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

CSS - The bad parts

Mixed up formatting

Duplication

Mixed up colors and dimensions

Long selectors

Imports are slow!

SASS SCSS

CompilerSCSS SCSS CSSSCSS will be compiled to CSS

CSS SCSSYou can simply copy existing CSS

CSS Enhancements

#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

#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

$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

$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

$color: #777777; #content { compile background-color: #444444; }#content { background-color: darken($color, 20%); h2 {} color: #f6f6f6; }h2 { color: lighten($color, 50%);} SCSS Functions (predefined)

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)

@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

@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

$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

$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

@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

/* /* * 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

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)

sass --watch imports.scssWatch your changes

Debugging

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

SASS Frameworkhttp://compass-style.org

sassify TYPO3 Extension based on PHamlPhttp://typo3.org/documentation/document-library/extension-manuals/sassify/1.0.1/view

Reality Check

Thank You!

Questions?

http://www.networkteam.com	235
http://lanyrd.com	23
http://a0.twimg.com	3
http://translate.googleusercontent.com	1

Save time by using SASS/SCSS

by Berit Jensen on Oct 09, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 262

Statistics

Save time by using SASS/SCSS — Presentation Transcript