Post on 28-Jan-2015
description
Strukturiertes CSS mit SASS und sassify
SASS
HTML
CSS
<head><link rel=“...<link rel=“...
CSS
CSS über <link> einfügen
HTML
<html>...<div style=“color: #abc; padding: 2px“>
Inline-CSSDON‘T!
HTML
CSS
<div id=“header“> <ul class=“menu“> <li>Item 1</li> <li><a href=“#“>Item 2</a></li> </ul></div><div id=“footer“> <ul><li> <a href=“#>Impressum</a> </li></ul></div>
Selektoren
#header { ... }#header ul.menu { ... }#header ul.menu li { ... }#header ul.menu li a { ... }li a { ... }
Schwächen von CSS
Einheitliche Formatierung?
Wiederholung von Eigenschaften
Farben und Abstände sind verteilt
Lange Selektoren
Importe sind langsam!
SASSbzw. SCSS
CSS
SCSS wird in CSS übersetzt
SCSS
SCSS
Compiler
CSS kann übernommen werden!
CSS SCSS
Benutzung
Änderungen überwachen
sass --watch imports.scss
CSS Erweiterungen
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;}
Selektor Referenzen
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;}
VariablenSCSS
$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;}
BerechnungenSCSS
$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
Funktionen (vordefiniert)
SCSS
$color: #777777;
#content { background-color: darken($color, 20%);}h2 { color: lighten($color, 50%);}
#content { background-color: #444444; }
h2 { color: #f6f6f6; }
compile
Funktionenhttp://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 list-style-none { list-style-image: none; list-style-position: outside; list-style-type: none;}#inhalt { .text_container ul { @include list-style-none; margin: 0px 0px 15px 15px; padding: 0px 0px 0px 0px; li { @include list-style-none;
background-image: ...;margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 15px; } }}
#inhalt .text_container ul { list-style-image: none; list-style-position: outside; list-style-type: none; text-align: left; margin: 0px 0px 15px 15px; padding: 0px 0px 0px 0px; } #inhalt .text_container ul li { list-style-image: none; list-style-position: outside; list-style-type: none; background-image: ...; background-repeat: no-repeat; text-align: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 15px; }
CSS
compile
Mixins mit ArgumentenSCSS
@mixin rounded-border($width, $color, $radius) { border-width: $width; border-style: solid; border-color: $color; border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius;}
div.menu { @include rounded-border(1px, #770000, 10px); width: 300px;}
div.sidebar { @include rounded-border(2px, #000000, 5px);}
Echte 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;}
Styles erweitern
SCSS
.error { border: 1px #f00; background-color: #fdd;}.serious-error { @extend .error; border-width: 3px;}
.error, .serious-error { border: 1px #f00; background-color: #fdd;}
.serious-error { border-width: 3px;}
CSS
compile
Styles erweitern (mehrfach)
SCSS
.error { border: 1px #f00; background-color: #fdd;}.error-icon { background-image: url("error.png");}.serious-error { @extend .error; @extend .error-icon; border-width: 3px;}
.error, .serious-error { border: 1px #f00; background-color: #fdd;}
.error-icon, .serious-error { background-image: url("error.png");}
.serious-error { border-width: 3px;}
CSS
compile
Kontrollstrukturen / if
SCSS
$type: business;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}
p { color: green; }
CSS
compile
Kontrollstrukturen / 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
Kommentare
SCSS
/* * Mehrzeiliges CSS Kommentar */body { color: black; }
// Einzeiliges, internes Kommentara { color: green }
/* * Mehrzeiliges CSS Kommentar */body { color: black; }
a { color: green; }
CSS
compile
Windows
Installation
■ RubyInstaller (http://www.ruby-lang.org/de/downloads/)
■ Sass Gem installieren:gem install sass --pre
Debugging
FireSassFirebug Extension
sass -g imports.scss > imports.css
sass -i
Berechnungen testen
sassify Demo