Sass & Compass - CSS für Fortgeschrittene

TYPO3 Usergroup Bodensee #t3see

Sass & CompassCSS für Fortgeschrittene

14.03.2013


Wer ist der Typ?

• Wolfgang Wagner

• Web Developer bei jweiland.net

• lebt in Friedrichshafen

• Gründungsmitglied der #t3see

• Bloggt auf http://wowa-webdesign.de über TYPO3, Webdesign und alles mögliche

• Twitter: @wowawebdesign


Sass


Sass

• Sass ist ein Precompiler für CSS

• Sass steht für „syntactically awesome style sheets“

• bietet eine einfachere und elegantere Syntax für CSS


Sass installieren

• Benötigt Ruby

• Ruby ist bei Mac OS schon dabei

• unter Linux via Paket-Manager installieren

• für Windows: http://rubyinstaller.org

• dann im Terminal:

gem install sass


Sass Syntax#main

color: blue

font-‐size: 0.3em

a

font:

weight: bold

family: serif

&:hover

background-‐color: #eee


SCSS Syntax#main {

color: blue;

font-‐size: 0.3em;

a {

font: {

weight: bold;

family: serif;

}

&:hover {

background-‐color: #eee;

}

}

}

Jede .css Datei kann zu einer .scss Datei gemacht werden


• Änderungen werden nur noch in .scss-Dateien vorgenommen

• Sass kompiliert aus den .scss-Dateien .css-Dateien

• Kompilierung manuell oder automatisch per

sass -‐-‐watch style.scss:style.css

• Überwachung eines Ordners mit mehreren Dateien per

sass -‐-‐watch stylesheets/scss:stylesheets/css

Vorgehensweise


Nesting

/* style.scss */

#navbar { width: 80%; height: 23px;

ul { list-‐style-‐type: none; }

li { float: left; a { font-‐weight: bold; } }}

Features

/* style.css */

#navbar { width: 80%; height: 23px; }

#navbar ul { list-‐style-‐type: none; }

#navbar li { float: left; }

#navbar li a { font-‐weight: bold; }


Nesting mit Media Queries

/* style.scss */

#h1 { font-‐size:200%; a { color: #000;

@media only screen and (max-‐width:320px){ color: #00f; } }}

Features

/* style.css */

#h1 { font-‐size:200%;}

#h1 a { color: #000};

@media only screen and (max-‐width:320px){ #h1 a { color: #00f; }}


Schlechtes Nesting

div#main { #sidebar { #navbar { width: 80%; height: 23px; aside { div { ul { list-‐style-‐type: none; li { float: left; a { font-‐weight: bold; } } } } } } }}

FeaturesResultiert in

div#main #sidebar #navbar {...}div#main #sidebar #navbar aside div ul {...}div#main #sidebar #navbar aside div ul li {...}div#main #sidebar #navbar aside div ul li a {...}

• Viel zu spezifische Selektoren• schlechte Performance


Nesting mit Pseudoklassen

/* style.scss */

a { color: #333; &:hover { color: #00f; } &:visited { color: #999; }}

Features

/* style.css */

a { color: #333; }a:hover { color: #00f; }a:visited { color: #999; }


Features

• Variablen können im gesamten Stylesheet genutzt werden

• Variablennamen beginnen mit einem $ und werden wie normale Eigenschaften deklariert

• Variabeln können Farben, Zahlen (mit Einheiten) oder Text enthalten

Variablen


FeaturesVariablen/* style.scss */

$maxwidth: 80em;$fontcolor: #666;$fontfamily: Arial,helvetica,sans-‐serif;$headerfontcolor: #009;$headerfontfamily: Tahoma,Arial,helvetica,sans-‐serif;

body { color: $fontcolor; font-‐family: $fontfamily;}

h1,h2,h3,h4,h5,h6 { color: $headerfontcolor; font-‐family: $headerfontfamily;}

/* style.css */

body { color: #666666; font-‐family: Arial, helvetica, sans-‐serif;}

h1, h2, h3, h4, h5, h6 { color: #000099; font-‐family: Tahoma, Arial, helvetica, sans-‐serif;}


FeaturesOperatoren +, -, /, */* style.scss */

$navbar-‐width: 800px;$items: 5;

#navbar { width: $navbar-‐width; li {

float: left;width: $navbar-‐width/$items -‐ 10px;

}}

/* style.css */

#navbar { width: 800px;}

#navbar li { float: left; width: 150px;}


FeaturesFarb-Manipulationen/* style.scss */

$navbar-‐width: 800px;$items: 5;$navbar-‐color: #ce4dd6;

#navbar { width: $navbar-‐width; background: $navbar-‐color;

li { float: left; width: $navbar-‐width/$items -‐ 10px; &:hover: lighten($navbar-‐color,20%); }}

lighten(color,amount)Hellt eine Farbe um einen Prozentwert auf (amount)

darken(color,amount)Dunkelt eine Farbe ab

Es gibt noch weitere Funktionen (hue, saturate, desaturate, grayscale, complement, invert ...)


Features@if

/* style.scss */

$theme: dark;

body {@if $theme == light {background: #c7c7c7;color: #000;

} @else if $theme == dark {background: #222;color: #ddd;

}}


Features@for

/* style.scss */

@for $i from 1 through 6 { h#{$i} { font-‐size: 2.5em-‐(0.25em*$i); } }

/* style.css */

h1 { font-‐size: 2.25em; }

h2 { font-‐size: 2em; }




h6 { font-‐size: 1em; }


Features@for

/* style.scss */$theme:dark;

@for $i from 1 through 6 { h#{$i} { font-‐size: 2.5em-‐(0.25em*$i); @if $theme == dark { color:#000; } } }

/* style.scss */h1 { font-‐size: 2.25em; color: #000; }

h2 { font-‐size: 2em; color: #000; }

h3 { font-‐size: 1.75em; color: #000; }



h6 { font-‐size: 1em; color: #000; }


Features@each

/* style.scss */

@each $section in home, about, archive, projects { nav { .#{$section} & { background-‐image: url(/images/nav/#{$section}.png); } }}

/* style.css */

.home nav { background-‐image: url(/images/nav/home.png); }

.about nav { background-‐image: url(/images/nav/about.png); }

.archive nav { background-‐image: url(/images/nav/archive.png); }

.projects nav { background-‐image: url(/images/nav/projects.png); }


FeaturesMixins• Mixins sind „wiederverwertbare“ Codeblöcke• können einmal definiert global verwendet werden

/* style.scss */

@mixin box-‐shadow($shadow){-‐webkit-‐box-‐shadow: $shadow;-‐moz-‐box-‐shadow: $shadow;box-‐shadow: $shadow;

}

#box {width: 50%;padding: 1em;@include box-‐shadow(0 0 10px rgba(0,0,0,.4));

}

/* style.css */

#box { width: 50%; padding: 1em; -‐webkit-‐box-‐shadow: 0 0 10px rgba(0, 0, 0, 0.4); -‐moz-‐box-‐shadow: 0 0 10px rgba(0, 0, 0, 0.4); box-‐shadow: 0 0 10px rgba(0, 0, 0, 0.4);}


Mixin für Retina Images/* style.scss */

/* Mixin */@mixin image-‐2x($image, $width, $height) { @media (min-‐-‐moz-‐device-‐pixel-‐ratio: 1.3), (-‐o-‐min-‐device-‐pixel-‐ratio: 2.6/2), (-‐webkit-‐min-‐device-‐pixel-‐ratio: 1.3), (min-‐device-‐pixel-‐ratio: 1.3), (min-‐resolution: 1.3dppx) { /* on retina, use image that's scaled by 2 */ background-‐image: url($image); background-‐size: $width $height; }}

/* Anwendung */div.logo { background: url("logo.png") no-‐repeat; @include image-‐2x("logo2x.png", 100px, 25px);}

/* style.css */

div.logo { background: url("logo.png") no-‐repeat;}@media (min-‐-‐moz-‐device-‐pixel-‐ratio: 1.3), (-‐o-‐min-‐device-‐pixel-‐ratio: 2.6 / 2), (-‐webkit-‐min-‐device-‐pixel-‐ratio: 1.3), (min-‐device-‐pixel-‐ratio: 1.3), (min-‐resolution: 1.3dppx) { div.logo { /* on retina, use image that's scaled by 2 */ background-‐image: url("logo2x.png"); background-‐size: 100px 25px; }}

Quelle: Easy retina-ready images using SCSS

Features

http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss

http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss


Features@extend• per @extend werden Eigenschaften einer Regel in eine andere übernommen

/* style.scss */

$buttontextcolor:#000;$buttonbgrcolor:#ccc;$green: #090;

.button {color: $buttontextcolor;background: $buttonbgrcolor;width: 8em;text-‐align:center;padding: .5em 1em;font-‐weight: bold;

}

.button-‐confirm {@extend .button;background: $green;width: 10em;

}

/* style.scss */

.button, .button-‐confirm { color: black; background: #cccccc; width: 8em; text-‐align: center; padding: .5em 1em; font-‐weight: bold;}

.button-‐confirm { background: #009900; width: 10em;}


FeaturesModularisierung• .scss Dateien in viele kleine Dateien aufteilen• Underscore im Dateinamen „verhindert“ Kompilierung

z.B. _mixins.scss, _variablen.scss• Einbindung in Hauptdatei per @import

/* style.scss */

@import „global/variablen“;@import „global/mixins“;@import „content/links“;@import „content/typography“;@import „layout/grid“;@import „navigation/mainnav“;...

Beim Kompilieren werden alle Module in die style.css geschrieben


FeaturesKommentare/* style.scss */

/* Das ist ein normalermehrzeilger Kommentar */

.page {width: $max-‐width;

}

// Das ist ein einzeiliger Kommentar der// in der CSS-‐Datei nicht zu sehen sein wirdheader {background: $headerbgrcolor;

}

/* style.css */

/* Das ist ein normalermehrzeilger Kommentar */

.page {width: 80em;

}

header {background: #334455;

}


Compass


Compass

• Compass ist Framework um Sass zu erweitern

• bringt viele CSS3 - Mixins und Helper Functions mit

• erleichtert die Verwendung von CSS-Sprites


Compass installieren

gem install compass


Neues Compass Projekt• Compass kann ein leeres Projekt mit grundlegender CSS-Ausstattung anlegen

compass create <myproject>

Erzeugt:

config.rbsass/ie.scsssass/print.scsssass/screen.scssstylesheets/ie.cssstylesheets/screen.css

• Manuell SCSS kompilieren: compass compile <myproject>

• Projekt überwachen: compass watch <myproject>


Neues Compass Projekt

• Man kann auch eine bestehende Projektstruktur mit Compass verbinden

cd <myproject>compass create -‐-‐bare -‐-‐sass-‐dir „sass“ -‐-‐css-‐dir „css“ -‐-‐images-‐dir „images“ -‐-‐javascript-‐dir „js“


Compass Konfiguration• Die Datei config.rb enthält die Konfiguration des Projekts

# Set this to the root of your project when deployed:http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:# line_comments = false

• Bei Änderungen in der config.rb muss neu kompiliert werden mitcompass compile -‐-‐force

• Ausgabe für Production Environmentcompass compile -‐-‐output-‐style compressed -‐-‐force


Compass bietet verschiedene Module

• CSS3 - liefert Cross Browser kompatible CSS3 Mixins

• Typography - Mixins für allgemeine Typographie-Muster (Links, Listen etc.)

• Utilities - Mixins für Styling Muster (Listen, Texte, Farben, Sprites, Tabellen etc.)

• alle 3 Module untergliedern sich in weitere Submodule


Compass in Sass-Dateien verwenden

• @import „compass“

• @import „compass/css3“

• @import „compass/typography/links“

• Nur die wirklich verwendeten Mixins werden importiert

• CSS wird also nicht unnötig aufgeblasen


Beispiel „Horizontale Liste“/* style.scss */

ul.nav { @include horizontal-‐list-‐container; > li { @include horizontal-‐list-‐item; }}

/* style.scss */

ul.nav { margin: 0; padding: 0; border: 0; overflow: hidden; *zoom: 1;}ul.nav > li { list-‐style-‐image: none; list-‐style-‐type: none; margin-‐left: 0; white-‐space: nowrap; float: left; display: inline; padding-‐left: 4px; padding-‐right: 4px;}ul.nav > li:first-‐child, ul.nav > li.first { padding-‐left: 0;}ul.nav > li:last-‐child { padding-‐right: 0;}ul.nav > li.last { padding-‐right: 0;}


Beispiel „Gradients“/* style.scss */

#linear-‐gradient { @include background(linear-‐gradient(left top, white, #dddddd));}

/* style.scss */

#linear-‐gradient { background: -‐webkit-‐gradient(linear, 0% 0%, 100% 100%, color-‐stop(0%, #ffffff), color-‐stop(100%, #dddddd)); background: -‐webkit-‐linear-‐gradient(left top, #ffffff, #dddddd); background: -‐moz-‐linear-‐gradient(left top, #ffffff, #dddddd); background: -‐o-‐linear-‐gradient(left top, #ffffff, #dddddd); background: linear-‐gradient(left top, #ffffff, #dddddd);}


Beispiel „Transitions“/* style.scss */

#width-‐duration { @include transition-‐property(width); @include transition-‐duration(2s); }

/* style.scss */

#width-‐duration { -‐webkit-‐transition-‐property: width; -‐moz-‐transition-‐property: width; -‐o-‐transition-‐property: width; transition-‐property: width; -‐webkit-‐transition-‐duration: 2s; -‐moz-‐transition-‐duration: 2s; -‐o-‐transition-‐duration: 2s; transition-‐duration: 2s;}


Helper Functions image-width() & image-height()

/* style.scss */

$logofile: "logo.png";

#logo { background: url($logofile) 0 0 no-‐repeat; width: image-‐width($logofile); height: image-‐height($logofile);}

Pfad zur Datei ist immer relativ zum Bilder-Verzeichnis des Projekts (definiert in der config.rb)


Helper Function inline-image()

/* style.scss */

$logofile: "logo.png";#logo { background: inline-‐image($logofile) 0 0 no-‐repeat; width: image-‐width($logofile); height: image-‐height($logofile);}

• Bilddateien können base64-enkodiert direkt in der CSS-Datei platziert werden.• ein HTTP-Request weniger• Geeignet bei kleineren Bildern (Icons)

/* style.css */

#logo { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABUCAMAAADwIoiUAAAAY1BMVEX///+/v7/v7+//dwhkToR/.....kSuQmCC') 0 0 no-‐repeat; width: 200px; height: 84px;}


Helper Function headings()

/* style.scss */

#content .col1 { #{headings()}{ color: #009; }}

#sidebar { #{headings(2,4)}{ color:#c90; }}

/* style.css */

#content .col1 h1, #content .col1 h2, #content .col1 h3, #content .col1 h4, #content .col1 h5, #content .col1 h6 { color: #009;}

#sidebar h2, #sidebar h3, #sidebar h4 { color: #c90;}


Sprites

• Compass kann Sprites aus Einzelbildern erzeugen

• Dazu die Bilder in einen Ordner legen und in das Stylesheet importieren

images/my-‐icons/new.pngimages/my-‐icons/edit.pngimages/my-‐icons/save.pngimages/my-‐icons/delete.png

(Die Bilder seien in diesem Beispiel 32x32px groß)

@import „my-‐icons/*.png“;@include all-‐my-‐icons-‐sprites;

.my-‐icons-‐sprite,

.my-‐icons-‐delete,

.my-‐icons-‐edit,

.my-‐icons-‐new,

.my-‐icons-‐save { background: url('/images/my-‐icons-‐s34fe0604ab.png') no-‐repeat; }

.my-‐icons-‐delete { background-‐position: 0 0; }

.my-‐icons-‐edit { background-‐position: 0 -‐32px; }

.my-‐icons-‐new { background-‐position: 0 -‐64px; }

.my-‐icons-‐save { background-‐position: 0 -‐96px; }


Links

• sass-lang.com

• compass-style.org

• sassmeister.com

http://sass-lang.com

http://sass-lang.com

http://compass-style.org

http://compass-style.org

http://sassmeister.com

http://sassmeister.com


BücherSass and Compass in Action

E-Book $35.99Print $44.99

http://www.manning.com/netherland/

Pragmatic Guide to Sass

E-Book $13.00Print $25.00

http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass








Fragen?


Danke!

Sass & Compass - CSS für Fortgeschrittene

Technology

Transcript of Sass & Compass - CSS für Fortgeschrittene