Eine kleine Einführung in SASS

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