Sass einfuehrung-t3camphh

SASS
Strukturiertes CSS mit SASS und sassify

<head>
<link rel=“...
<link rel=“...

CSS

HTML CSS

CSS über <link> einfügen

<html>
...
<div style=“color: #abc; padding: 2px“>

‘T !
HTML
O N
D
Inline-CSS

<div id=“header“> #header { ... }
<ul class=“menu“> #header ul.menu { ... }
<li>Item 1</li> #header ul.menu li { ... }
<li><a href=“#“>Item 2</a></li> #header ul.menu li a { ... }
</ul> li a { ... }
</div>
<div id=“footer“>
<ul><li> CSS
<a href=“#>Impressum</a>
</li></ul>
</div>

HTML

Selektoren

Wiederholung von Eigenschaften

Farben und Abstände sind verteilt

Compiler

SCSS

SCSS
CSS

SCSS wird in CSS übersetzt

CSS SCSS

CSS kann übernommen werden!

sass --watch imports.scss

Änderungen überwachen

#header { #header {
... ...
} ul.menu {
#header ul.menu li a { ...
... li {
} ...
#header ul.menu li { a{
... refactor ...
} }
li a { }
... li a {
} ...
#header ul.menu { }
...
}
CSS SCSS

Nesting

#header ul.menu li a { #header {
color: #000; ul.menu {
} li {
#header ul.menu li a:hover { a{
color: #ccc; color: #000;
} &:hover {
color: #ccc;
refactor }
}
}

CSS SCSS

Selektor Referenzen

$grey: #c7c7c7;
$border-size: solid 1px;
$border: $border-size $grey;
#menu { #menu {
... ...
border-left: solid 1px #c7c7c7; border-left: $border;
border-top: solid 1px #c7c7c7; border-top: $border;
border-right: solid 1px #c7c7c7; border-right: $border;
} refactor }
#rootline { #rootline {
... ...
background-color: #c7c7c7; background-color: $grey;
} }
#content { #content {
... ...
border-left: solid 1px #c7c7c7; border-left: $border;
border-top: solid 1px #c7c7c7; border-top: $border;
border-right: solid 1px #c7c7c7; border-right: $border;
} CSS } SCSS

Variablen

$total-width: 600px;
$sidebar-width: 100px;
$spacing: 20px;

#content { #content {
width: 500px; width: $total-width - $sidebar-width;
padding: 40px; padding: $spacing * 2;
} }
#sidebar { refactor #sidebar {
width: 100px; width: $sidebar-width;
margin-left: 20px; margin-left: $spacing;
} }

CSS SCSS

Berechnungen

$color: #777777; #content {
compile background-color: #444444; }
#content {
background-color: darken($color, 20%); h2 {
} color: #f6f6f6; }
h2 {
color: lighten($color, 50%);
}

SCSS

Funktionen (vordefiniert)

Funktionen
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

adjust_hue(color, degrees) alpha(color) percentage(value)
complement(color) blue(color) unit(number)
darken(color, amount) green(color) unitless(number)
desaturate(color, amount) hue(color)
grayscale(color) red(color) quote(str)
lighten(color, amount) opacity(color) unquote(str)
mix(color1, color2, weight) lightness(color)
opacify(color, amount) saturation(color)
saturate(color, amount)
transparentize(color, amount) abs(value)
ceil(value)
hsl(hue, saturation, lightness) floor(value)
hsla(hue, saturation, lightness, round(value)
alpha)
rgb(red, green, blue) comparable(number1, number2)
rgba(red, green, blue, alpha) type_of(obj)
rgba(color, alpha)

@mixin list-style-none { #inhalt .text_container ul {
list-style-image: none; list-style-image: none;
list-style-position: outside; list-style-position: outside;
list-style-type: none; list-style-type: none;
} text-align: left;
#inhalt { margin: 0px 0px 15px 15px;
.text_container ul { padding: 0px 0px 0px 0px; }
@include list-style-none; #inhalt .text_container ul li {
compile
margin: 0px 0px 15px 15px; list-style-image: none;
padding: 0px 0px 0px 0px; list-style-position: outside;
li { list-style-type: none;
@include list-style-none; background-image: ...;
background-image: ...; background-repeat: no-repeat;
margin: 0px 0px 0px 0px; text-align: left;
padding: 0px 0px 0px 15px; margin: 0px 0px 0px 0px;
} padding: 0px 0px 0px 15px; }
}
} SCSS CSS

Mixins

@mixin rounded-border($width, $color, $radius) {
border-width: $width;
border-style: solid;
border-color: $color;
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}

div.menu {
@include rounded-border(1px, #770000, 10px);
width: 300px;
}

div.sidebar {
@include rounded-border(2px, #000000, 5px);
}
SCSS

Mixins mit Argumenten

$color = #cc7700; #inhalt {
compile background-color: #663c00; }
@import "a.scss";
@import "b.scss"; h2 {
SCSS color: #cc7700; }

#inhalt {
background-color: darken($color, 20%);
}

a.scss

h2 {
color: $color;
}
b.scss CSS

Echte Imports

.error { .error, .serious-error {
border: 1px #f00; compile border: 1px #f00;
background-color: #fdd; background-color: #fdd;
} }
.serious-error {
@extend .error; .serious-error {
border-width: 3px; border-width: 3px;
} }

SCSS CSS

Styles erweitern

.error { .error, .serious-error {
border: 1px #f00; compile border: 1px #f00;
background-color: #fdd; background-color: #fdd;
} }
.error-icon {
background-image: url("error.png"); .error-icon, .serious-error {
} background-image: url("error.png");
.serious-error { }
@extend .error;
@extend .error-icon; .serious-error {
border-width: 3px; border-width: 3px;
} }

SCSS CSS

Styles erweitern (mehrfach)

$type: business; p{
p{ compile color: green; }
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}

SCSS CSS

Kontrollstrukturen / if

@for $i from 1 through 3 { h1 {
h#{$i} { compile font-size: 0.8em; }
font-size: 1em - (0.2 * $i);
} h2 {
} font-size: 0.6em; }

h3 {
font-size: 0.4em; }

SCSS CSS

Kontrollstrukturen / for

/* /*
* Mehrzeiliges CSS Kommentar compile * Mehrzeiliges CSS Kommentar
*/ */
body { color: black; } body {
color: black; }
// Einzeiliges, internes Kommentar
a { color: green } a{
color: green; }

SCSS CSS

Kommentare

Installation

■ RubyInstaller (http://www.ruby-lang.org/de/downloads/)

■ Sass
Gem installieren:
gem install sass --pre

sass -g imports.scss > imports.css

FireSass
Firebug Extension

sass -i

Berechnungen testen

Sass einfuehrung-t3camphh

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (15)

Sass einfuehrung-t3camphh