Download pdf - 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


Fazit und Links

InstallationEin Stylesheet mit Sass

Installation

RubyRubygemsgem install haml

Grandrath Sass


Fazit und Links


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


Fazit und Links



input.scss


}


output.css


Grandrath Sass


Fazit und Links



input.scss


}


output.css


Grandrath Sass


Fazit und Links


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


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


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


Fazit und Links

Variablen

input.scss

$link-color: #ce4dd6;

a {color: $link-color;

}

output.css

a {color: #ce4dd6; }

Grandrath Sass


Fazit und Links

Variablen

input.scss

$link-color: #ce4dd6;

a {color: $link-color;

}

output.css

a {color: #ce4dd6; }

Grandrath Sass


Fazit und Links

Nesting

input.scss


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


Fazit und Links

Nesting

input.scss


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


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


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


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


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


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


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


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


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;


}

output.css



Grandrath Sass


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


}

output.css



Grandrath Sass


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


}

output.css



Grandrath Sass


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



Grandrath Sass


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



Grandrath Sass


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


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


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


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

http://sass-lang.com/

http://haml-lang.com/

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

http://rubygems.org/

http://rubyinstaller.org/


Fazit und Links

Fragen?

Fragen!

Grandrath Sass