Upload
wolfgang-wagner
View
2.318
Download
0
Embed Size (px)
DESCRIPTION
Slides vom TYPO3 Usergroup Treffen 14.03.2013. Kurzer Einblick in Sass und Compass, Installation, Anwendung und Anwendungsbeispiele.
Citation preview
TYPO3 Usergroup Bodensee #t3see
Sass & CompassCSS für Fortgeschrittene
14.03.2013
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
Sass
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
Sass Syntax#main
color: blue
font-‐size: 0.3em
a
font:
weight: bold
family: serif
&:hover
background-‐color: #eee
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
• Ä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
TYPO3 Usergroup Bodensee #t3see
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; }
TYPO3 Usergroup Bodensee #t3see
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; }}
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
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; }
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
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;}
TYPO3 Usergroup Bodensee #t3see
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;}
TYPO3 Usergroup Bodensee #t3see
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 ...)
TYPO3 Usergroup Bodensee #t3see
Features@if
/* style.scss */
$theme: dark;
body {@if $theme == light {background: #c7c7c7;color: #000;
} @else if $theme == dark {background: #222;color: #ddd;
}}
TYPO3 Usergroup Bodensee #t3see
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; }
h3 { font-‐size: 1.75em; }
h4 { font-‐size: 1.5em; }
h5 { font-‐size: 1.25em; }
h6 { font-‐size: 1em; }
TYPO3 Usergroup Bodensee #t3see
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; }
h4 { font-‐size: 1.5em; color: #000; }
h5 { font-‐size: 1.25em; color: #000; }
h6 { font-‐size: 1em; color: #000; }
TYPO3 Usergroup Bodensee #t3see
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); }
TYPO3 Usergroup Bodensee #t3see
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);}
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
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;}
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
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;
}
TYPO3 Usergroup Bodensee #t3see
Compass
TYPO3 Usergroup Bodensee #t3see
Compass
• Compass ist Framework um Sass zu erweitern
• bringt viele CSS3 - Mixins und Helper Functions mit
• erleichtert die Verwendung von CSS-Sprites
TYPO3 Usergroup Bodensee #t3see
Compass installieren
gem install compass
TYPO3 Usergroup Bodensee #t3see
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>
TYPO3 Usergroup Bodensee #t3see
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“
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
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;}
TYPO3 Usergroup Bodensee #t3see
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);}
TYPO3 Usergroup Bodensee #t3see
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;}
TYPO3 Usergroup Bodensee #t3see
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)
TYPO3 Usergroup Bodensee #t3see
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;}
TYPO3 Usergroup Bodensee #t3see
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;}
TYPO3 Usergroup Bodensee #t3see
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; }
TYPO3 Usergroup Bodensee #t3see
Links
• sass-lang.com
• compass-style.org
• sassmeister.com
TYPO3 Usergroup Bodensee #t3see
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
TYPO3 Usergroup Bodensee #t3see
Fragen?
TYPO3 Usergroup Bodensee #t3see
Danke!