Eine kleine Einführung in SASS

Eine kurze Einführung in SASS und eine noch Kürzere in CompassMontag, 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, 2009Montag, 14. November 11

Montag, 14. November 11

SASS .box margin: 1em .entry-content border: 1px solid #f00Montag, 14. November 11

SCSS .box { margin: 1em; .entry-content { border: 1px solid #f00; } }Montag, 14. November 11

CSS 2.1Montag, 14. November 11

CSS 3Montag, 14. November 11

VARIABLEN & Co. CSS wird ProgrammierspracheMontag, 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

NESTING Vererbung & das Klä ern auf BäumeMontag, 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

ﬂickr.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

MIXINS Einen Gang höherMontag, 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

DAS GIBT ES FÜR’S GELD ★ Alles, was SASS bietet ★ Noch mehr Funktionen ★ Mixin Bibliothek ★ Projekt-Umgebung ★ ErweiterungenMontag, 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

ﬂickr.com/photos/runningdevineMontag, 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.net vortrieb.netMontag, 14. November 11

BONUSMontag, 14. November 11

Eine kleine Einführung in SASS

by Andreas Dantz

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Eine kleine Einführung in SASS Presentation Transcript