Eine kleine Einführung in SASS

Eine kurze Einführung in

SASS
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


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


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


CSS 2.1


CSS 3


VARIABLEN & Co. CSS wird Programmiersprache


SCSS

$maincolor: #f00;
$compcolor: #0ff;

a { color: $maincolor; }
a:hover,
a:focus { color: $compcolor; }

CSS

a { color: #f00; }
a:hover,
a:focus { color: #0ff; }


SCSS

4px + 4px;
4px - 4px;
4px * 2;
4px / 2;
CSS

8px;
0px;
8px;
2px;


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;
}


SCSS

round(4.3);
ceil(4.2);
floor(4.6);
abs(-12);
percentage(26/50);
CSS

4;
5;
4;
12;
52%;


SCSS

$maincolor: #f00;

a { color: $maincolor; }
a:hover,
a:focus { color: lighten($maincolor, 30%); }

CSS

a { color: #f00; }
a:hover,
a:focus { color: #f99; }


SCSS

adjust-hue($color, $degrees)
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)
desaturate($color, $amount)
grayscale($color)
complement($color)
invert($color)


NESTING Vererbung &
das Klä ern auf Bäume


SCSS

.box {
width: 60%;
h2 { font-size: 24px; }
}
CSS

.box {
width: 60%;
}

.box h2 { font-size: 24px; }


SCSS

.box {
header, footer { background-color: #000; }
}
CSS

.box header, .box footer {
background-color: #000
}


SCSS

a {
color: #f00;
text-decoration: none;
&:hover { text-decoration: underline }
}
CSS

a {
color: #f00;
text-decoration:none;
}

a:hover { text-decoration: underline; }


SCSS

button {
background: linear-gradient(#fff, #eee };
.no-cssgradients & { background: #eee };
}

CSS

button {
# code mit dem Verlauf
}

.no-cssgradients button {
background: #eee;
}


ﬂickr.com/photos/sharynmorrow/

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%);
}


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;
}


VORSICHT!

CSS

#wrapper header#header .meta-nav nav ul li a span,
.container #sidebar .region-sidebar .views-view-
generic .item span {
color #f00;
}


MIXINS
Einen Gang höher


SCSS

@mixin linkeffect {
color: #f00;
&:hover { color: darken(#f00, 30%); }
}

nav a { @include linkeffect; }
CSS

nav a {
color: #f00;
}

nav a:hover {
color: #660000;
}


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;
}


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; }


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; }

DAS GIBT ES FÜR’S GELD
★ Alles, was SASS bietet
★ Noch mehr Funktionen
★ Mixin Bibliothek
★ Projekt-Umgebung
★ Erweiterungen


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;
}

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);
}

ﬂickr.com/photos/runningdevine

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;
}


JA, ABER…

FRAGEN? @dantz
ad@vortrieb.net
vortrieb.net


Eine kleine Einführung in SASS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Eine kleine Einführung in SASS

Ähnlich wie Eine kleine Einführung in SASS (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Eine kleine Einführung in SASS