syntactically awesome stylesheets mit sass
DESCRIPTION
TRANSCRIPT
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