Download - Eine kleine Einführung in SASS
![Page 1: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/1.jpg)
SASS
Eine kurze Einführung in
und eine noch Kürzere in Compass
Montag, 14. November 11
![Page 2: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/2.jpg)
„CSS zu kompilieren ist eine völlig bescheuerte Idee. Das braucht kein Mensch und wer es nutzt, schlägt auch Omas auf der Straße.“
— Andreas Dantz, 2009
Montag, 14. November 11
![Page 3: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/3.jpg)
Montag, 14. November 11
![Page 4: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/4.jpg)
.box
margin: 1em .entry-content border: 1px solid #f00
SASS
Montag, 14. November 11
![Page 5: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/5.jpg)
.box {
margin: 1em; .entry-content { border: 1px solid #f00; }}
SCSS
Montag, 14. November 11
![Page 6: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/6.jpg)
CSS 2.1
Montag, 14. November 11
![Page 7: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/7.jpg)
CSS 3
Montag, 14. November 11
![Page 8: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/8.jpg)
VARIABLEN & Co.CSS wird Programmiersprache
Montag, 14. November 11
![Page 9: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/9.jpg)
SCSS
$maincolor: #f00;$compcolor: #0ff;
a { color: $maincolor; }a:hover,a:focus { color: $compcolor; }
CSS
a { color: #f00; }a:hover,a:focus { color: #0ff; }
Montag, 14. November 11
![Page 10: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/10.jpg)
SCSS
4px + 4px;4px - 4px;4px * 2;4px / 2;
CSS
8px;0px;8px;2px;
Montag, 14. November 11
![Page 11: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/11.jpg)
SCSS
$defaultmargin: 20px;
.box {border: 1px solid #000;margin: $defaultmargin / 2;padding: $defaultmargin / 2 - 1px;
}
CSS
.box { border: 1px solid #000; margin: 10px; padding: 9px;}
Montag, 14. November 11
![Page 12: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/12.jpg)
SCSS
round(4.3);ceil(4.2);floor(4.6);abs(-12);percentage(26/50);
CSS
4;5;4;12;52%;
Montag, 14. November 11
![Page 13: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/13.jpg)
SCSS
$maincolor: #f00;
a { color: $maincolor; }a:hover,a:focus { color: lighten($maincolor, 30%); }
CSS
a { color: #f00; }a:hover,a:focus { color: #f99; }
Montag, 14. November 11
![Page 14: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/14.jpg)
SCSS
adjust-hue($color, $degrees)
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)
desaturate($color, $amount)
grayscale($color)
complement($color)
invert($color)
Montag, 14. November 11
![Page 15: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/15.jpg)
NESTINGVererbung &
das Klä!ern auf Bäume
Montag, 14. November 11
![Page 16: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/16.jpg)
SCSS
.box {width: 60%;h2 { font-size: 24px; }
}
CSS
.box {width: 60%;
}
.box h2 { font-size: 24px; }
Montag, 14. November 11
![Page 17: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/17.jpg)
SCSS
.box {header, footer { background-color: #000; }
}
CSS
.box header, .box footer {background-color: #000
}
Montag, 14. November 11
![Page 18: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/18.jpg)
SCSS
a {color: #f00;text-decoration: none;&:hover { text-decoration: underline }
}
CSS
a { color: #f00; text-decoration:none;}
a:hover { text-decoration: underline; }
Montag, 14. November 11
![Page 19: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/19.jpg)
SCSS
button {background: linear-gradient(#fff, #eee };.no-cssgradients & { background: #eee };
}
CSS
button { # code mit dem Verlauf}
.no-cssgradients button { background: #eee; }
Montag, 14. November 11
![Page 20: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/20.jpg)
flickr.com/photos/sharynmorrow/
Montag, 14. November 11
![Page 21: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/21.jpg)
SCSS
.message { background-color: #eee; border: 1px solid #ccc; padding: 1em;}
.message p:last-child { margin-bottom: 0; }
.error { @extend .message; background-color: lighten(#f00, 60%); border: 1px solid #f00;}
Montag, 14. November 11
![Page 22: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/22.jpg)
CSS
.message, .error { background-color: #eee; border: 1px solid #ccc; padding: 1em; }
.message p:last-child,
.error p:last-child { margin-bottom: 0; }
.error { background-color: white; border: 1px solid #f00; }
Montag, 14. November 11
![Page 23: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/23.jpg)
VORSICHT!Montag, 14. November 11
![Page 24: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/24.jpg)
CSS
#wrapper header#header .meta-nav nav ul li a span,.container #sidebar .region-sidebar .views-view-generic .item span { color #f00;}
Montag, 14. November 11
![Page 25: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/25.jpg)
MIXINSEinen Gang höher
Montag, 14. November 11
![Page 26: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/26.jpg)
SCSS
@mixin linkeffect { color: #f00; &:hover { color: darken(#f00, 30%); }}
nav a { @include linkeffect; }
CSS
nav a { color: #f00;}
nav a:hover { color: #660000;}
Montag, 14. November 11
![Page 27: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/27.jpg)
SCSS
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}
.box { @include border-radius(5px); }
CSS
.box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
Montag, 14. November 11
![Page 28: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/28.jpg)
SCSS
@mixin linkcolor($link:black, $hover:red) { color: $link; &:hover { color: $hover; }}
a { @include linkcolor($hover:yellow ); }
CSS
a { color: black; }a:hover { color: yellow; }
Montag, 14. November 11
![Page 29: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/29.jpg)
SCSS
@mixin linkcolor($dark: false) { @if $dark == true { color: black; &:hover { color: blue; } } @else { color: white; &:hover { color: #ccc; } }}
a { @include linkcolor(); }a.alt { @include linkcolor(true); }
CSS
a { color: white; }a:hover { color: #ccc; }a.alt { color: black; }a.alt:hover { color: blue; }
Montag, 14. November 11
![Page 30: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/30.jpg)
Montag, 14. November 11
![Page 31: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/31.jpg)
★ Alles, was SASS bietet★ Noch mehr Funktionen★ Mixin Bibliothek★ Projekt-Umgebung★ Erweiterungen
DAS GIBT ES FÜR’S GELD
Montag, 14. November 11
![Page 32: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/32.jpg)
SCSS
header { background: image-url('logo.jpg'); h1 { width: image-width('logo.jpg'); height: image-height('logo.jpg'); }}
CSS
header { background: url('/images/logo.jpg?1321202172');}
header h1 { width: 346px; height: 400px;}
Montag, 14. November 11
![Page 33: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/33.jpg)
SCSS
.box { @include border-radius(8px); @include background(linear-gradient(#000, #333));}
CSS
.box { -moz-border-radius: 8px;-webkit-border-radius: 8px;-ms-border-radius: 8px; border-radius: 8px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #333333)); background: -webkit-linear-gradient(#000000, #333333); background: -moz-linear-gradient(#000000, #333333); background: linear-gradient(#000000, #333333);}
Montag, 14. November 11
![Page 34: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/34.jpg)
flickr.com/photos/runningdevine
Montag, 14. November 11
![Page 35: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/35.jpg)
SCSS
@import "icon/*.png";@include all-icon-sprites($dimensions:true);
CSS
.icon-sprite, .icon-minus { background: url('/images/icon-sd557c6037f.png') no-repeat;}
.icon-minus { background-position: 0 0; height: 7px; width: 24px;}
Montag, 14. November 11
![Page 36: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/36.jpg)
JA, ABER…
Montag, 14. November 11
![Page 37: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/37.jpg)
FRAGEN?@dantz
Montag, 14. November 11
![Page 38: Eine kleine Einführung in SASS](https://reader030.vdocuments.pub/reader030/viewer/2022020921/54c826544a7959fe6d8b460f/html5/thumbnails/38.jpg)
BONUS
Montag, 14. November 11