Download pdf - Sass einfuehrung-t3camphh

Transcript
Page 1: Sass einfuehrung-t3camphh

Strukturiertes CSS mit SASS und sassify

SASS

Page 2: Sass einfuehrung-t3camphh

HTML

CSS

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

CSS

CSS über <link> einfügen

Page 3: Sass einfuehrung-t3camphh

HTML

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

Inline-CSSDON‘T!

Page 4: Sass einfuehrung-t3camphh

HTML

CSS

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

Selektoren

#header { ... }#header ul.menu { ... }#header ul.menu li { ... }#header ul.menu li a { ... }li a { ... }

Page 5: Sass einfuehrung-t3camphh

Schwächen von CSS

Page 6: Sass einfuehrung-t3camphh

Einheitliche Formatierung?

Page 7: Sass einfuehrung-t3camphh

Wiederholung von Eigenschaften

Page 8: Sass einfuehrung-t3camphh

Farben und Abstände sind verteilt

Page 9: Sass einfuehrung-t3camphh

Lange Selektoren

Page 10: Sass einfuehrung-t3camphh

Importe sind langsam!

Page 11: Sass einfuehrung-t3camphh

SASSbzw. SCSS

Page 12: Sass einfuehrung-t3camphh

CSS

SCSS wird in CSS übersetzt

SCSS

SCSS

Compiler

Page 13: Sass einfuehrung-t3camphh

CSS kann übernommen werden!

CSS SCSS

Page 14: Sass einfuehrung-t3camphh

Benutzung

Page 15: Sass einfuehrung-t3camphh

Änderungen überwachen

sass --watch imports.scss

Page 16: Sass einfuehrung-t3camphh

CSS Erweiterungen

Page 17: Sass einfuehrung-t3camphh

CSS

#header { ...}#header ul.menu li a { ...}#header ul.menu li { ...}li a { ...}#header ul.menu { ...}

Nesting

SCSS

#header { ... ul.menu { ... li { ... a { ... }}li a { ...}

refactor

Page 18: Sass einfuehrung-t3camphh

CSS

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

Selektor Referenzen

SCSS

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

refactor

Page 19: Sass einfuehrung-t3camphh

CSS

#menu { ... border-left: solid 1px #c7c7c7; border-top: solid 1px #c7c7c7; border-right: solid 1px #c7c7c7;}#rootline { ... background-color: #c7c7c7;}#content { ... border-left: solid 1px #c7c7c7; border-top: solid 1px #c7c7c7; border-right: solid 1px #c7c7c7;}

VariablenSCSS

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

refactor

Page 20: Sass einfuehrung-t3camphh

CSS

#content { width: 500px; padding: 40px;}#sidebar { width: 100px; margin-left: 20px;}

BerechnungenSCSS

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

#content { width: $total-width - $sidebar-width; padding: $spacing * 2;}#sidebar { width: $sidebar-width; margin-left: $spacing;}

refactor

Page 21: Sass einfuehrung-t3camphh

Funktionen (vordefiniert)

SCSS

$color: #777777;

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

#content { background-color: #444444; }

h2 { color: #f6f6f6; }

compile

Page 22: Sass einfuehrung-t3camphh

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

adjust_hue(color, degrees)complement(color)darken(color, amount)desaturate(color, amount)grayscale(color)lighten(color, amount)mix(color1, color2, weight)opacify(color, amount)saturate(color, amount)transparentize(color, amount)

hsl(hue, saturation, lightness)hsla(hue, saturation, lightness, alpha)rgb(red, green, blue)rgba(red, green, blue, alpha)rgba(color, alpha)

alpha(color)blue(color)green(color)hue(color)red(color)opacity(color)lightness(color)saturation(color)

abs(value)ceil(value)floor(value)round(value)

comparable(number1, number2)type_of(obj)

percentage(value)unit(number)unitless(number)

quote(str)unquote(str)

Page 23: Sass einfuehrung-t3camphh

MixinsSCSS

@mixin list-style-none { list-style-image: none; list-style-position: outside; list-style-type: none;}#inhalt { .text_container ul { @include list-style-none; margin: 0px 0px 15px 15px; padding: 0px 0px 0px 0px; li { @include list-style-none;

background-image: ...;margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 15px; } }}

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

CSS

compile

Page 24: Sass einfuehrung-t3camphh

Mixins mit ArgumentenSCSS

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

Page 25: Sass einfuehrung-t3camphh

Echte Imports

SCSS

$color = #cc7700;

@import "a.scss";@import "b.scss";

#inhalt { background-color: #663c00; }

h2 { color: #cc7700; }

CSS

compile

a.scss

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

b.scss

h2 { color: $color;}

Page 26: Sass einfuehrung-t3camphh

Styles erweitern

SCSS

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

.error, .serious-error { border: 1px #f00; background-color: #fdd;}

.serious-error { border-width: 3px;}

CSS

compile

Page 27: Sass einfuehrung-t3camphh

Styles erweitern (mehrfach)

SCSS

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

.error, .serious-error { border: 1px #f00; background-color: #fdd;}

.error-icon, .serious-error { background-image: url("error.png");}

.serious-error { border-width: 3px;}

CSS

compile

Page 28: Sass einfuehrung-t3camphh

Kontrollstrukturen / if

SCSS

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

p { color: green; }

CSS

compile

Page 29: Sass einfuehrung-t3camphh

Kontrollstrukturen / for

SCSS

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

h1 { font-size: 0.8em; }

h2 { font-size: 0.6em; }

h3 { font-size: 0.4em; }

CSS

compile

Page 30: Sass einfuehrung-t3camphh

Kommentare

SCSS

/* * Mehrzeiliges CSS Kommentar */body { color: black; }

// Einzeiliges, internes Kommentara { color: green }

/* * Mehrzeiliges CSS Kommentar */body { color: black; }

a { color: green; }

CSS

compile

Page 31: Sass einfuehrung-t3camphh

Windows

Page 32: Sass einfuehrung-t3camphh

Installation

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

■ Sass Gem installieren:gem install sass --pre

Page 33: Sass einfuehrung-t3camphh

Debugging

Page 34: Sass einfuehrung-t3camphh

FireSassFirebug Extension

sass -g imports.scss > imports.css

Page 35: Sass einfuehrung-t3camphh

sass -i

Berechnungen testen

Page 36: Sass einfuehrung-t3camphh

sassify Demo