Transcript
Page 1: Eine kleine Einführung in SASS

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

„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

Montag, 14. November 11

Page 4: Eine kleine Einführung in SASS

.box

margin: 1em .entry-content border: 1px solid #f00

SASS

Montag, 14. November 11

Page 5: Eine kleine Einführung in SASS

.box {

margin: 1em; .entry-content { border: 1px solid #f00; }}

SCSS

Montag, 14. November 11

Page 6: Eine kleine Einführung in SASS

CSS 2.1

Montag, 14. November 11

Page 7: Eine kleine Einführung in SASS

CSS 3

Montag, 14. November 11

Page 8: Eine kleine Einführung in SASS

VARIABLEN & Co.CSS wird Programmiersprache

Montag, 14. November 11

Page 9: Eine kleine Einführung in SASS

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

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

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

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

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

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

NESTINGVererbung &

das Klä!ern auf Bäume

Montag, 14. November 11

Page 16: Eine kleine Einführung in SASS

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

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

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

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

flickr.com/photos/sharynmorrow/

Montag, 14. November 11

Page 21: Eine kleine Einführung in SASS

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

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

VORSICHT!Montag, 14. November 11

Page 24: Eine kleine Einführung in SASS

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

MIXINSEinen Gang höher

Montag, 14. November 11

Page 26: Eine kleine Einführung in SASS

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

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

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

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

Montag, 14. November 11

Page 31: Eine kleine Einführung in SASS

★ 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

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

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

flickr.com/photos/runningdevine

Montag, 14. November 11

Page 35: Eine kleine Einführung in SASS

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

JA, ABER…

Montag, 14. November 11

Page 38: Eine kleine Einführung in SASS

BONUS

Montag, 14. November 11


Recommended