Post on 28-Jan-2015
description
SASS
Eine kurze Einführung in
und eine noch Kürzere in Compass
Montag, 14. November 11
„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
Montag, 14. November 11
.box
margin: 1em .entry-content border: 1px solid #f00
SASS
Montag, 14. November 11
.box {
margin: 1em; .entry-content { border: 1px solid #f00; }}
SCSS
Montag, 14. November 11
CSS 2.1
Montag, 14. November 11
CSS 3
Montag, 14. November 11
VARIABLEN & Co.CSS wird Programmiersprache
Montag, 14. November 11
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
SCSS
4px + 4px;4px - 4px;4px * 2;4px / 2;
CSS
8px;0px;8px;2px;
Montag, 14. November 11
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
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
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
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
NESTINGVererbung &
das Klä!ern auf Bäume
Montag, 14. November 11
SCSS
.box {width: 60%;h2 { font-size: 24px; }
}
CSS
.box {width: 60%;
}
.box h2 { font-size: 24px; }
Montag, 14. November 11
SCSS
.box {header, footer { background-color: #000; }
}
CSS
.box header, .box footer {background-color: #000
}
Montag, 14. November 11
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
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
flickr.com/photos/sharynmorrow/
Montag, 14. November 11
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
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
VORSICHT!Montag, 14. November 11
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
MIXINSEinen Gang höher
Montag, 14. November 11
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
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
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
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
Montag, 14. November 11
★ Alles, was SASS bietet★ Noch mehr Funktionen★ Mixin Bibliothek★ Projekt-Umgebung★ Erweiterungen
DAS GIBT ES FÜR’S GELD
Montag, 14. November 11
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
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
flickr.com/photos/runningdevine
Montag, 14. November 11
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
JA, ABER…
Montag, 14. November 11
FRAGEN?@dantz
ad@vortrieb.netvortrieb.net
Montag, 14. November 11
BONUS
Montag, 14. November 11