Contenu connexe Similaire à Eine kleine Einführung in SASS (6) 2. „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
4. SASS
.box
margin: 1em
.entry-content
border: 1px solid #f00
Montag, 14. November 11
5. SCSS
.box {
margin: 1em;
.entry-content {
border: 1px solid #f00;
}
}
Montag, 14. November 11
9. 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
10. SCSS
4px + 4px;
4px - 4px;
4px * 2;
4px / 2;
CSS
8px;
0px;
8px;
2px;
Montag, 14. November 11
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
12. 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
13. 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
14. 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
15. NESTING Vererbung &
das Klä ern auf Bäume
Montag, 14. November 11
16. SCSS
.box {
width: 60%;
h2 { font-size: 24px; }
}
CSS
.box {
width: 60%;
}
.box h2 { font-size: 24px; }
Montag, 14. November 11
17. SCSS
.box {
header, footer { background-color: #000; }
}
CSS
.box header, .box footer {
background-color: #000
}
Montag, 14. November 11
18. 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
19. 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
21. 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
22. 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
24. 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
25. MIXINS
Einen Gang höher
Montag, 14. November 11
26. 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
27. 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
28. 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
29. 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
31. DAS GIBT ES FÜR’S GELD
★ Alles, was SASS bietet
★ Noch mehr Funktionen
★ Mixin Bibliothek
★ Projekt-Umgebung
★ Erweiterungen
Montag, 14. November 11
32. 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
33. 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
35. 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
37. FRAGEN? @dantz
ad@vortrieb.net
vortrieb.net
Montag, 14. November 11
