Syntactically Awesome Stylesheets mit Sass

Erste SchritteFeatures

Fazit und Links

Syntactically Awesome Stylesheets mitSass

Martin Grandrath

InsertEFFECT GmbH

Webmontag Erlangen, 11. Oktober 2010

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

InstallationEin Stylesheet mit Sass

Installation

RubyRubygemsgem install haml

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

InstallationEin Stylesheet mit Sass

Jedes Stylesheet ist eine Sass-Datei

input.scss

#navbar {width: 80%;height: 23px;

}

$ sass input.scss:output.css

output.css

#navbar {width: 80%;height: 23px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

InstallationEin Stylesheet mit Sass

Jedes Stylesheet ist eine Sass-Datei

input.scss

#navbar {width: 80%;height: 23px;

}

$ sass input.scss:output.css

output.css

#navbar {width: 80%;height: 23px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

InstallationEin Stylesheet mit Sass

Jedes Stylesheet ist eine Sass-Datei

input.scss

#navbar {width: 80%;height: 23px;

}

$ sass input.scss:output.css

output.css

#navbar {width: 80%;height: 23px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

InstallationEin Stylesheet mit Sass

Nützliche Parameter

sass -watch input.scss:output.css Aktualisiertoutput.css automatisch wenn sich input.scssändert

sass -style compressed input.scss:output.cssErstellt eine minimierte Version ohne Whitespaceund Kommentare

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Kommentare

input.scss

/* A CSS comment */body { color: black; }

// A Sass commenta { color: green; }

output.css

/* A CSS comment */body {color: black; }

a {color: green; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Kommentare

input.scss

/* A CSS comment */body { color: black; }

// A Sass commenta { color: green; }

output.css

/* A CSS comment */body {color: black; }

a {color: green; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Variablen

input.scss

$link-color: #ce4dd6;

a {color: $link-color;

}

output.css

a {color: #ce4dd6; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Variablen

input.scss

$link-color: #ce4dd6;

a {color: $link-color;

}

output.css

a {color: #ce4dd6; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Nesting

input.scss

#navbar {width: 80%;height: 23px;

ul {list-style-type: none;

}li {float: left;a { font-weight: bold; }

}}

output.css

#navbar {width: 80%;height: 23px; }#navbar ul {list-style-type: none; }

#navbar li {float: left; }#navbar li a {font-weight: bold; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Nesting

input.scss

#navbar {width: 80%;height: 23px;

ul {list-style-type: none;

}li {float: left;a { font-weight: bold; }

}}

output.css

#navbar {width: 80%;height: 23px; }#navbar ul {list-style-type: none; }

#navbar li {float: left; }#navbar li a {font-weight: bold; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Arithmetik

input.scss

#navbar {$width: 800px;$items: 5;

width: $width;

li {float: left;width: $width/$items;

}}

output.css

#navbar {width: 800px; }#navbar li {float: left;width: 160px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Arithmetik

input.scss

#navbar {$width: 800px;$items: 5;

width: $width;

li {float: left;width: $width/$items;

}}

output.css

#navbar {width: 800px; }#navbar li {float: left;width: 160px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Arithmetik mit Farben

input.scss

p {color: #010203 + #040506;

}

$links: #4e2e9e;

a {color: $links; }

a:hover {color: lighten($links, 25%);

}

output.css

p {color: #050709; }

a {color: #4e2e9e; }

a:hover {color: #9175d7; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Arithmetik mit Farben

input.scss

p {color: #010203 + #040506;

}

$links: #4e2e9e;

a {color: $links; }

a:hover {color: lighten($links, 25%);

}

output.css

p {color: #050709; }

a {color: #4e2e9e; }

a:hover {color: #9175d7; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Referenz auf Elternelement

input.scss

#main {color: black;a {font-weight: bold;&:hover { color: red; }

}}

output.css

#main {color: black; }#main a {font-weight: bold; }#main a:hover {

color: red; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Referenz auf Elternelement

input.scss

#main {color: black;a {font-weight: bold;&:hover { color: red; }

}}

output.css

#main {color: black; }#main a {font-weight: bold; }#main a:hover {

color: red; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Mixins

input.scss

@mixin rounded {$r: 10px;

-moz-border-radius: $r;-webkit-border-radius: $r;border-radius: $r;

}

#navbar li {@include rounded;

}#footer {@include rounded;

}

output.css

#navbar li {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

#footer {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Mixins

input.scss

@mixin rounded {$r: 10px;

-moz-border-radius: $r;-webkit-border-radius: $r;border-radius: $r;

}

#navbar li {@include rounded;

}#footer {@include rounded;

}

output.css

#navbar li {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

#footer {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Mixins mit Parametern

input.scss

@mixin rounded($r: 10px) {-moz-border-radius: $r;-webkit-border-radius: $r;border-radius: $r;

}

#navbar li {@include rounded(5px);

}#footer {@include rounded;

}

output.css

#navbar li {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }

#footer {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Mixins mit Parametern

input.scss

@mixin rounded($r: 10px) {-moz-border-radius: $r;-webkit-border-radius: $r;border-radius: $r;

}

#navbar li {@include rounded(5px);

}#footer {@include rounded;

}

output.css

#navbar li {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }

#footer {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

@import

rounded.scss

@mixin rounded($r: 10px) {-moz-border-radius: $r;-webkit-border-radius: $r;border-radius: $r; }

input.scss

@import "rounded";

#navbar li {@include rounded(5px); }

#footer {@include rounded; }

output.css

#navbar li {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }

#footer {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

@import

rounded.scss

@mixin rounded($r: 10px) {-moz-border-radius: $r;-webkit-border-radius: $r;border-radius: $r; }

input.scss

@import "rounded";

#navbar li {@include rounded(5px); }

#footer {@include rounded; }

output.css

#navbar li {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }

#footer {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

@extend

input.scss

.error {border: 1px #f00;background-color: #fdd;

}

.seriousError {@extend .error;border-width: 3px;

}

output.css

.error, .seriousError {border: 1px #f00;background-color: #fdd; }

.seriousError {border-width: 3px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

@extend

input.scss

.error {border: 1px #f00;background-color: #fdd;

}

.seriousError {@extend .error;border-width: 3px;

}

output.css

.error, .seriousError {border: 1px #f00;background-color: #fdd; }

.seriousError {border-width: 3px; }

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Pro und Kontra

ProVieles, was man bisher bei CSS vermisst hat (z. B.Variablen)Flache Lernkurve durch CSS-SyntaxCode wird besser wartbar (z. B. Nesting, Mixins)Stylesheets können zur Entwicklung auf mehrere Dateienverteilt und in der Produktion in einer einzelnen Dateiausgeliefert werden (@import)

KontraDeployment-Prozess wird komplexerStylesheets können größer als erwartet werden

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Links

Sasshttp://sass-lang.com/

Hamlhttp://haml-lang.com/

Rubyhttp://www.ruby-lang.org/

RubyGemshttp://rubygems.org/

Ruby für Windowshttp://rubyinstaller.org/

Grandrath Sass

Erste SchritteFeatures

Fazit und Links

Fragen?

Fragen!

Grandrath Sass