Sass & Compass - CSS für Fortgeschrittene

Sass & Compass
CSS 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


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;
Jede .css Datei kann zu

font-‐size:
0.3em; einer .scss Datei gemacht

a
{ werden

font:
{

weight:
bold;

family:
serif;

}

&:hover
{

background-‐color:
#eee;

}

}

}


Vorgehensweise
• Ä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


Features
Nesting
/*
style.scss
*/ /*
style.css
*/

#navbar
{ #navbar
{

width:
80%;

width:
80%;

height:
23px;

height:
23px;

}

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

li
{

float:
left; #navbar
li
{
float:
left;
}

a
{
font-‐weight:
bold;
}

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


Features
Nesting mit Media Queries
/*
style.scss
*/ /*
style.css
*/

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

font-‐size:200%;

a
{

color:
#000; #h1
a
{
color:
#000};

@media
only
screen
and
(max-‐width:320px){ @media
only
screen
and
(max-‐width:320px){

color:
#00f;

#h1
a
{
color:
#00f;
}

} }

}
}


Features
Schlechtes Nesting Resultiert in
div#main
{ div#main
#sidebar
#navbar
{...}

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

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

width:
80%; div#main
#sidebar
#navbar
aside
div
ul
li
a
{...}

height:
23px;

aside
{

div
{

ul
{

none;

li
{ • Viel zu speziﬁsche Selektoren

float:
left; • schlechte Performance

a
{

font-‐weight:
bold;

}

}

}

}

}

}

}
}


Features
Nesting mit Pseudoklassen
/*
style.scss
*/ /*
style.css
*/

a
{ a
{
color:
#333;
}

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

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

&:visited
{
color:
#999;
}
}


Features
Variablen

• 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


Features
Variablen
/*
style.scss
*/ /*
style.css
*/

$maxwidth:
80em; body
{
$fontcolor:
#666;

color:
#666666;
$fontfamily:
Arial,helvetica,sans-‐serif;

font-‐family:
Arial,
helvetica,
sans-‐serif;
$headerfontcolor:
#009; }
$headerfontfamily:
Tahoma,Arial,helvetica,sans-‐serif;
h1,
h2,
h3,
h4,
h5,
h6
{
body
{

color:
#000099;

color:
$fontcolor;

font-‐family:
Tahoma,
Arial,
helvetica,
sans-‐serif;

font-‐family:
$fontfamily; }
}

h1,h2,h3,h4,h5,h6
{

color:
$headerfontcolor;

font-‐family:
$headerfontfamily;
}


Features
Operatoren +, -, /, *
/*
style.scss
*/ /*
style.css
*/

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

width:
800px;
}
#navbar
{

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

float:
left;

li
{

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

}
}


Features
Farb-Manipulationen
/*
style.scss
*/
lighten(color,amount)
$navbar-‐width:
800px; Hellt eine Farbe um einen Prozentwert auf (amount)
$items:
5;
$navbar-‐color:
#ce4dd6;
darken(color,amount)
#navbar
{ Dunkelt eine Farbe ab

width:
$navbar-‐width;

background:
$navbar-‐color;
Es gibt noch weitere Funktionen (hue, saturate,

li
{ desaturate, grayscale, complement, invert ...)

float:
left;

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

&:hover:
lighten($navbar-‐color,20%);

}
}


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
*/ /*
style.css
*/

@for
$i
from
1
through
6
{ h1
{
font-‐size:
2.25em;
}

h#{$i}
{
font-‐size:
2.5em-‐(0.25em*$i);
}

} h2
{
font-‐size:
2em;
}

h3
{
font-‐size:
1.75em;
}

h4
{
font-‐size:
1.5em;
}

h5
{
font-‐size:
1.25em;
}

h6
{
font-‐size:
1em;
}


Features
@for
/*
style.scss
*/ /*
style.scss
*/
$theme:dark; h1
{
font-‐size:
2.25em;
color:
#000;
}

@for
$i
from
1
through
6
{ h2
{
font-‐size:
2em;
color:
#000;
}

h#{$i}
{
font-‐size:
2.5em-‐(0.25em*$i);

@if
$theme
==
dark
{ h3
{
font-‐size:
1.75em;
color:
#000;
}

color:#000;

} h4
{
font-‐size:
1.5em;
color:
#000;
}

}

} h5
{
font-‐size:
1.25em;
color:
#000;
}

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


Features
@each
/*
style.scss
*/ /*
style.css
*/

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

nav
{

.#{$section}
&
{ .about
nav
{
url(/images/nav/about.png);
}

url(/images/nav/#{$section}.png);

} .archive
nav
{
url(/images/nav/archive.png);
}

}
} .projects
nav
{
url(/images/nav/projects.png);
}


Features
Mixins
• Mixins sind „wiederverwertbare“ Codeblöcke
• können einmal deﬁniert global verwendet werden
/*
style.scss
*/ /*
style.css
*/

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

width:
50%;
-‐moz-‐box-‐shadow:
$shadow;

padding:
1em;
box-‐shadow:
$shadow;

-‐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);
#box
{ }
width:
50%;
padding:
1em;
@include
box-‐shadow(0
0
10px
rgba(0,0,0,.4));
}


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

/*
Mixin
*/ div.logo
{
@mixin
image-‐2x($image,
$width,
$height)
{

background:
url("logo.png")
no-‐repeat;

@media
(min-‐-‐moz-‐device-‐pixel-‐ratio:
1.3), }

(-‐o-‐min-‐device-‐pixel-‐ratio:
2.6/2), @media
(min-‐-‐moz-‐device-‐pixel-‐ratio:
1.3),
(-‐o-‐min-‐device-‐pixel-‐ratio:
2.6
/
2),
(-‐webkit-‐

(-‐webkit-‐min-‐device-‐pixel-‐ratio:
1.3), min-‐device-‐pixel-‐ratio:
1.3),
(min-‐device-‐pixel-‐ratio:
1.3),
(min-‐resolution:
1.3dppx)
{

(min-‐device-‐pixel-‐ratio:
1.3),

div.logo
{

(min-‐resolution:
1.3dppx)
{

/*
on
retina,
use
image
that's
scaled
by
2
*/

/*
on
retina,
use
image
that's
scaled
by
2
*/

url("logo2x.png");

url($image);

background-‐size:
100px
25px;

background-‐size:
$width
$height;

}

} }
}

/*
Anwendung
*/
div.logo
{

background:
url("logo.png")
no-‐repeat;

@include
image-‐2x("logo2x.png",
100px,
25px);
}

Quelle: Easy retina-ready images using SCSS


Features
@extend
• per @extend werden Eigenschaften einer Regel in eine andere übernommen
/*
style.scss
*/ /*
style.scss
*/

$buttontextcolor:#000; .button,
.button-‐confirm
{
$buttonbgrcolor:#ccc;

color:
black;
$green:
#090;

background:
#cccccc;

width:
8em;
.button
{

text-‐align:
center;
color:
$buttontextcolor;

padding:
.5em
1em;
background:
$buttonbgrcolor;

font-‐weight:
bold;
width:
8em; }
text-‐align:center;
padding:
.5em
1em; .button-‐confirm
{
font-‐weight:
bold;

background:
#009900;
}

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


Features
Modularisierung
• .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“; Beim Kompilieren werden alle Module
@import
„content/links“; in die style.css geschrieben
@import
„content/typography“;
@import
„layout/grid“;
@import
„navigation/mainnav“;
.
.
.


Features
Kommentare
/*
style.scss
*/ /*
style.css
*/

/*
Das
ist
ein
normaler /*
Das
ist
ein
normaler
mehrzeilger
Kommentar
*/ mehrzeilger
Kommentar
*/
.page
{ .page
{
width:
$max-‐width; width:
80em;
} }

//
Das
ist
ein
einzeiliger
Kommentar
der header
{
//
in
der
CSS-‐Datei
nicht
zu
sehen
sein
wird background:
#334455;
header
{ }
background:
$headerbgrcolor;
}


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.rb
sass/ie.scss
sass/print.scss
sass/screen.scss
stylesheets/ie.css
stylesheets/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 mit
compass
compile
-‐-‐force

• Ausgabe für Production Environment
compass
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
*/ /*
style.scss
*/

ul.nav
{ ul.nav
{

@include
horizontal-‐list-‐container;

margin:
0;

>
li
{

padding:
0;

@include
horizontal-‐list-‐item;

border:
0;

}

overflow:
hidden;
}

*zoom:
1;
}
ul.nav
>
li
{

list-‐style-‐image:
none;

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
*/ /*
style.scss
*/

#width-‐duration
{ #width-‐duration
{

@include
transition-‐property(width);

-‐webkit-‐transition-‐property:
width;

@include
transition-‐duration(2s);

-‐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
(deﬁniert in der conﬁg.rb)


Helper Function inline-image()
/*
style.scss
*/ /*
style.css
*/

$logofile:
"logo.png"; #logo
{
#logo
{

background:
url('data:image/

background:
inline-‐image($logofile)
0
0
no-‐repeat; png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABUCAMAAADwIoiUAAAAY1BMVE

width:
image-‐width($logofile); X///+/v7/v7+//dwhkToR/.....kSuQmCC')
0
0
no-‐repeat;

height:
image-‐height($logofile);

width:
200px;
}

height:
84px;
}

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


Helper Function headings()
/*
style.scss
*/ /*
style.css
*/

#content
.col1
{ #content
.col1
h1,
#content
.col1
h2,
#content
.col1
h3,

#{headings()}{ #content
.col1
h4,
#content
.col1
h5,
#content
.col1
h6
{

color:
#009;

color:
#009;

} }
}
#sidebar
h2,
#sidebar
h3,
#sidebar
h4
{
#sidebar
{

color:
#c90;

#{headings(2,4)}{ }

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.png @import
„my-‐icons/*.png“; .my-‐icons-‐sprite,
images/my-‐icons/edit.png @include
all-‐my-‐icons-‐sprites; .my-‐icons-‐delete,
images/my-‐icons/save.png .my-‐icons-‐edit,
images/my-‐icons/delete.png .my-‐icons-‐new,
.my-‐icons-‐save

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

diesem
Beispiel
32x32px
.my-‐icons-‐delete
{
background-‐position:
0
0;
}
groß) .my-‐icons-‐edit

{
0
-‐32px;
}
.my-‐icons-‐new

{
0
-‐64px;
}
.my-‐icons-‐save

{
0
-‐96px;
}


Links
• sass-lang.com

• compass-style.org

• sassmeister.com


Bücher
Sass and Compass in Action Pragmatic Guide to Sass

E-Book $35.99 E-Book $13.00
Print $44.99 Print $25.00

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


Fragen?


Danke!


Sass & Compass - CSS für Fortgeschrittene

Weitere ähnliche Inhalte

Andere mochten auch

Mehr von Wolfgang Wagner

Sass & Compass - CSS für Fortgeschrittene