Anzeige
Tutorialbeschreibung

SASS - CSS bekommt Superkräfte

SASS - CSS bekommt Superkräfte

In diesem Tutorial möchte ich euch die Skriptsprache bzw. das Framework namens SASS vorstellen. SASS ist eine CSS-Erweiterung, die es ermöglicht, CSS-Code dynamisch zu erzeugen. Auf diese Art und Weise kann ein Farbwert beispielsweise in eine Variable ausgelagert und an mehreren Stellen ausgegeben werden, damit man so später schnelle Änderungen vornehmen kann.


In meinem letzten Tutorial habe ich euch LESS vorgestellt. LESS erfüllt hierbei den Zweck, CSS-Code mit einfachen Mitteln (Variablen, Operationen, Funktionen und Mixins) dynamisch zu erzeugen, um so den Workflow eines Webdesigners zu erleichtern. Doch LESS ist nicht die einzige Möglichkeit, um CSS-Code dynamisch zu erzeugen. Allen voran sind es die sogenannten Syntactically Awesome Style Sheets, kurz SASS, welche sogar einen größeren Funktionsumfang bieten als LESS. In diesem Tutorial möchte ich euch diese mächtige CSS-Erweiterung vorstellen und euch anhand eines kleinen Beispiels SASS etwas näher bringen.


SASS oder doch lieber LESS?

Welche der beiden CSS-Erweiterungen ihr verwendet, hängt ganz davon ab, für welche Zwecke ihr SASS oder LESS verwenden möchtet. Während Content-Management-Systeme wie Joomla! oder Frameworks wie Twitter Bootstrap auf LESS setzen, ist es vor allem das beliebte CMS WordPress, dessen Admin-Backend mit SASS umgesetzt wurde. SASS und LESS unterscheiden sich von der Schreibweise im Grunde genommen kaum. Lediglich die Deklarierung der Variablen ist bei SASS etwas anders. Wo LESS ganz untypisch mit dem @-Zeichen als Präfix für Variablen daherkommt, lehnt sich SASS bei der Definierung stark an PHP an und verwendet das Dollar-Zeichen (also $). An dieser Stelle möchte ich zur Verdeutlichung noch mal das Beispiel aus meinem letzten Tutorial anführen. In LESS wurden Variablen folgendermaßen definiert:

@farbe: #123456;

In SASS ist das Ganze (wie schon erwähnt) nicht viel anders, nur mit dem Unterschied, dass hier ein Dollar-Zeichen verwendet wird:

$farbe: #123456;

Auch die Mixins ähneln sich in der Schreibweise. Während ein Mixin in LESS ähnlich wie eine CSS-Klasse definiert wird ...

.eckenradius (@radius: 5px) {
border-radius: @radius;
}


... deklariert man ein Mixin in SASS mit „@mixin [mixinname] ...

@mixin eckenradius ($radius : 5px) {
border-radius: $radius;
}


So gesehen gibt es also nur geringfügige Unterschiede, die im Detail zu erkennen sind. Es gibt jedoch einen bzw. zwei Unterschiede, welche SASS evtl. doch etwas schmackhafter machen, denn auf der einen Seite hat SASS einen größeren Funktionsumfang als LESS und bietet somit viel mehr Flexibilität. Auf der anderen Seite muss SASS nicht mittels JavaScript oder PHP integriert werden. Dank des Paketsystems RubyGems wird SASS direkt in eine CSS-Datei umgewandelt.

RubyGems macht SASS lebendig

Der letzte Satz aus dem letzten Absatz dürfte den einen oder anderen Leser ein wenig stutzig gemacht haben. Doch keine Panik. RubyGems zu verwenden, ist einfacher, als man denkt. Wer einen Mac besitzt, der kann bereits ohne große Mühen in den Genuss von RubyGems kommen, da RubyGems für Mac-Computer schon von Haus aus vorinstalliert ist. Windows-User hingegen müssen RubyGems zunächst einmal installieren, um anschließend auch SASS integrieren zu können. Auf rubyinstaller.org könnt ihr das Windows-Paket von RubyGems herunterladen und installieren.

Bilder


 
Klickt einfach direkt auf „Download“ und führt die EXE-Datei aus. Voilà - RubyGems ist installiert! Bevor ihr aber schon jetzt anfangt zu jubeln, solltet ihr wissen, dass damit die Arbeit noch nicht getan ist. Wir müssen noch eine kleine Sache erledigen, um SASS zu installieren. Um SASS zu installieren, ruft ihr euer Terminal (für Mac-Nutzer) oder eure CMD-Anwendung (für Windows) auf. Das Terminal ruft ihr beispielsweise auf, indem ihr auf dem Schreibtisch auf „Gehe zu - Dienstprogramme“ und anschließend in der Übersicht der Dienstprogramme auf „Terminal“ klickt. Seid ihr Windows-Nutzer, dann müsst ihr entweder auf den Start-Button klicken und in der Suche „Ruby“ eingeben (für Windows-7-Nutzer) oder die Einstellungen-Suche in der Charms-Leiste mittels Windows-Taste+Q (für Windows-8-Nutzer) aufrufen und dort ebenfalls „Ruby“ eingeben.

Wenn ihr den Begriff unter Windows eingegeben habt, sollte nun die Anwendung „Start Command Prompt with Ruby“ erscheinen. Macht einen Rechtsklick auf diese Anwendung (für Windows-7-Nutzer) und startet die Anwendung als Administrator. Damit stellt ihr sicher, dass ihr alle Zugriffsrechte habt. Wenn ihr euer Terminal bzw. Command Prompt geöffnet habt, gebt ihr Folgendes ein:
gem install sass

Wenn ihr Mac-Nutzer seid und den Befehl als Administrator eingeben wollt, dann gebt ihr vor dem Wort „gem“ den Begriff „sudo“ ein. Bei einer älteren Ruby-Gems Version ist folgender Code evtl. vonnöten:
gem install haml

 

SASS an einem Praxis-Beispiel erklärt

Was wäre ein Tutorial, wenn es keinen Praxisbezug gäbe? Deswegen soll an dieser Stelle ein einfaches Beispiel angeführt werden, mit dem die Funktion von SASS ein wenig näher erläutert werden kann. Wie LESS hat auch SASS die Funktion, Angaben, die mehrmals im CSS-Code vorkommen, in Variablen oder Mixins auszulagern, damit spätere Änderungen einfacher vorgenommen werden können. So weit, so gut. Wir nehmen nun einen Editor zur Hand. Wir erstellen eine neue HTML-Datei, löschen zunächst alle Angaben dieser Datei und fügen folgenden Code ein:
<!doctype html>
<html>
<head>
<meta charset=“utf-8“>
<title>Meine Seifenblasen</title>
<link rel=“stylesheet“ href=“style.css“>
<link href=‘http://fonts.googleapis.com/css?family=Alex+Brush‘ rel=‘stylesheet‘ type=‘text/css‘>
<link href=‘http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,600,600italic‘
rel=‘stylesheet‘ type=‘text/css‘>
</head>
<body>
<header>
<div class=“container clearfix“>
<div id=“bubble1“><h1 id=“logo“><a href=“#“>Meine Seifenblasen</a></h1></div><div id=“bubble2“></div>
<div id=“bubble3“></div><nav id=“hauptnavi“>
<ul>
<li><a href=“#“>Home</a></li>
<li><a href=“#“>Über uns</a></li>
<li><a href=“#“>...</a></li>
</ul>
</nav>
</div>
</header>
<div class=“container clearfix“>
<div id=“hauptinhalt“ role=“main“>
<h2>Willkommen auf unserer Webseite</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing<p>
</div>
<aside id=“sidebar“>
<h2>Meine Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing<p>
</aside>
</div>
<footer>Copyright 2014 meine-seifenblasen.de</footer>
</body>
</html>

Wie man dem Code entnehmen kann, handelt es sich um eine Seite für einen imaginären Seifenblasenhersteller, welcher gerne einige runde Elemente zu dieser Page haben möchte, damit ein Bezug zum Thema Seifenblasen hergestellt werden kann. Diese Aufgabenstellung kommt uns gerade recht, weil man mittels SASS Border-Radius Angaben in Mixins auslagern kann. Das hat den entscheidenden Vorteil, dass man mehrere Kreise mit nur einem Mixin definiert und die Werte jener Kreise nur durch dieses Mixin zu verändern braucht.

Doch bevor wir uns an SASS heranwagen, möchten wir zunächst der Einfachheit halber alles via CSS definieren und später jegliche Angaben, die mehrmals vorkommen, mithilfe von SASS in Variablen auslagern. Wir speichern also unsere HTML-Datei unter dem Namen „index.html“ ab und erstellen mit unserem Editor eine neue CSS-Datei.

Wir fügen dabei folgende Angaben ein und speichern die CSS-Datei unter dem Namen „style.css“ ab:

* {margin:0; padding:0;}
body {font-family: ‚Source Sans Pro‘, sans-serif; font-size: 0.875em; font-weight:300; color:#333;
background:#fff;}
.container {max-width:960px; margin:auto;}
header {width: auto; height: 320px; clear: both; position: relative; margin-top: 20px; }
header #bubble1 {width: 300px; height: 300px; background: #30b8ad; -webkit-border-radius: 160px; -moz-borderradius:
160px; border-radius: 160px;
position: absolute; left: 220px; z-index: 1;}
header #bubble2 {width: 100px; height: 100px; background: #259087; -webkit-border-radius: 160px; -moz-borderradius:
160px; border-radius: 160px;
position: absolute; top: 220px; z-index: 2;}
header #bubble3 {width: 200px; height: 200px; background-image: url(img/pic.jpg); background-size: 200px top:
200px; -webkit-border-radius: 160px; -moz-border-radius: 160px; border-radius: 160px; position: absolute;
20px; left: 490px; z-index: 3; border: 7px solid #30b8ad; }
header #logo {font-family: ‚Alex Brush‘, cursive; font-size: 4.1em; font-weight: 300; padding: 64px 0 0 0;
text-align: center;}
header #logo a {text-decoration:none; color:#fff;}
header #hauptnavi {float: right; text-transform: uppercase; margin: 0; margin-top: 20px;}
header #hauptnavi li {display:inline; padding: 0 10px;}
header #hauptnavi li:first-child {padding-left:0;}
header #hauptnavi li:last-child {padding-right:0;}
header #hauptnavi li a {font-size:1.2em; color:#fff; text-decoration:none; background: #30b8ad; display:
inline-block; width: 100px; height: 70px; text-align: center; margin: 200px 0 0 0; -webkit-border-radius:
160px; -moz-border-radius: 160px;
border-radius: 160px; padding-top: 30px;}
#hauptinhalt {float:left; max-width:600px; padding: 20px 0 47px 0;}
#hauptinhalt h2 {font-weight:300; font-size: 3em; color:#30b8ad;}
#hauptinhalt p {margin-top:10px; line-height:1.6;}
#sidebar {float:right; max-width:300px; margin-top:20px; margin-bottom:20px; padding: 10px 20px 10px 20px;
background:#339de3; height:300px; color:#fff;}
#sidebar h2 {font-weight:300; font-size:2.1em;}
#sidebar p {margin-top:10px; line-height:1.6;}
footer {background:#30b8ad; color:#fff; text-align:center; padding:20px 0;}
.clearfix:before,
.clearfix:after {content: „ „; /* 1 */ display: table; /* 2 */}
.clearfix:after {clear: both;}
.clearfix {
*zoom: 1;
}




Wichtig ist natürlich, dass die CSS-Datei sich im selben Ordner befindet wie die „index.html“-Datei.

Nehmt nun folgendes Bild, speichert es ab und packt es in einen Ordner namens "img". Dieser Ordner soll sich im selben Verzeichnis wie die "index.html" und "style.css" befinden.

Bilder


Wie im Beispiel aus dem letzten Tutorial haben wir den Fall, wo eine Angabe mehrmals vorkommt. Da wären zum einen die Farben mit den Werten „#30b8ad“ und „#fff“ und zum anderen die „Bubbles“ mit den Border-Radius-Angaben. Wir öffnen also wieder erst mal die „style.css“ und speichern sie als „style.scss“ ab. Damit hätten wir schon mal unsere CSS-Datei in eine SCSS-Datei umgewandelt und können somit von nun an mit SASS arbeiten. Über dem gesamten CSS-Code definieren wir zwei Variablen wie folgt:
$bubble: #30b8ad;
$weiss: #fff;

Außerdem soll auch unsere Seitenweite, der Hauptinhaltsbereich sowie die Sidebar variable Weitenangaben haben. Dementsprechend beträgt die Seitenweite 960 Pixel, während beim Hauptinhalt 360 Pixel davon abgezogen werden. Die Sidebar ist nur halb so groß wie der Hauptinhalt. Klingt kompliziert, ist aber simpel:
$container: 960px;
$hauptinhalt: $container - 360px;
$sidebar: $hauptinhalt / 2;

Auch die Border-Radius-Angaben wollen wir auslagern. Allerdings werden wir diesmal keine Variablen verwenden, sondern Mixins. Mixins bieten den Vorteil, dass mehrere CSS-Angaben ausgelagert werden können. Vor allen bei Border-Radius-Angaben empfiehlt es sich, auf Mixins zurückzugreifen, da diese Angaben (z.B. die Präfix-Angaben „-webkit“, „-moz“ und „-o“) aufgrund der verschiedenen Browser immer wiederholt werden müssen. Mixins deklariert man mit der Angabe „@mixin“, einem anschließenden Leerzeichen und den selbst ausgewählten Namen für das Mixin. In dem Fall nennen wir unser Mixin „kreis“, welcher folgende Angaben hat:
@mixin kreis ($radius : 160px){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

Zur Erklärung: In den Klammern wurde die Variable „$radius“ mit 160 Pixeln definiert. Diese Angabe ist optional und muss nicht unbedingt gemacht werden. Anschließend wurden im normalen CSS-Stil die wesentlichen Border-Radius-Angaben gemacht, mit dem Unterschied, dass hier statt Pixelwerten die Variable „$radius“ angegeben wurde, welche eben 160px als Wert besitzt. Um ein Mixin einzusetzen, müsst ihr lediglich an der entsprechenden Stelle „@include [mixinname]“ (in dem Fall „kreis“) eingeben. Im folgenden Code könnt ihr nun die entsprechenden Änderungen übernehmen:

$bubble: #30b8ad;
$weiss: #fff;
$container: 960px;
$hauptinhalt: $container - 360px;
$sidebar: $hauptinhalt / 2;
@mixin kreis ($radius : 160px){-webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}
* {margin:0; padding:0;}

body {font-family: ‚Source Sans Pro‘, sans-serif; font-size: 0.875em; font-weight:300; color:#333; background: $weiss;}
.container {max-width:$container; margin:auto;}
header {width:auto; height:320px; clear:both; position:relative; margin-top:20px;}
header #bubble1 {width: 300px; height: 300px; background: $bubble; @include kreis; position:absolute; left: 220px; z-index:1;}
header #bubble2 {width: 100px; height: 100px; background: darken($bubble, 10%); @include kreis; position: absolute; top: 220px; z-index:2;}
header #bubble3 {width: 200px; height: 200px; background-image:url(img/pic.jpg); background-size: 200px 200px; @include kreis; position: absolute; top: 20px; left: 490px; z-index:3; border: 7px solid $bubble;}
header #logo {font-family: ‚Alex Brush‘, cursive; font-size: 4.1em; font-weight:300; padding:64px 0 0 0; text-align:center;}
header #logo a {text-decoration:none; color: $weiss;}
header #hauptnavi {float: right; text-transform:uppercase; margin:0; margin-top:20px;}
header #hauptnavi li {display:inline; padding: 0 10px;}
header #hauptnavi li:first-child {padding-left:0;}
header #hauptnavi li:last-child {padding-right:0;}
header #hauptnavi li a {font-size:1.2em; color: $weiss; text-decoration:none; background:$bubble; display:inline-block; width:100px; height: 70px; text-align:center; margin:200px 0 0 0; @include kreis; padding-top: 30px;}
#hauptinhalt {float:left; max-width:$hauptinhalt; padding: 20px 0 47px 0;}
#hauptinhalt h2 {font-weight:300; font-size: 3em; color: $bubble;}
#hauptinhalt p {margin-top:10px; line-height:1.6;}
#sidebar {float:right; max-width:$sidebar; margin-top:20px; margin-bottom:20px; padding: 10px 20px 10px 20px; background: lighten($bubble, 12%); height:170px; color: $weiss;}
#sidebar h2 {font-weight:300; font-size:2.1em;}
#sidebar p {margin-top:10px; line-height:1.6;}
footer {background:$bubble; color: $weiss; text-align:center; padding:20px 0;}
.clearfix:before, .clearfix:after {content: „ „; /* 1 */ display: table; /* 2 */}
.clearfix:after {clear: both;} .clearfix {*zoom: 1;}



Ihr werdet sicherlich zur Kenntnis genommen haben, dass ihr beim Abändern des CSS-Codes auch zwei „merkwürdige“ Funktionen eingefügt habt:
lighten($bubble, 12%);
darken($bubble, 10%);

Die Funktion mit den Namen „lighten“ ermöglicht es, eine Farbe um einen gewissen Prozentsatz aufzuhellen. Das hat den Vorteil, dass man keine weiteren, helleren Farbtöne derselben Farbe festlegen muss. In diesem Fall wurde die Variable bzw. Farbe „$bubble“
um 12% aufgehellt.

 
Bei „darken“ ist genau das Gegenteil der Fall. Hier wurde oben genannte Variable um 10% verdunkelt. Ihr könnt z.B. auch die Sättigung mit folgender Funktion um 20% verringern:
desaturate($bubble, 20%);

SASS besitzt eine Vielzahl von Funktionen, die es ermöglichen, Farben aufzuhellen / abzudunkeln, Zahlen auf- und abzurunden, Objekte mit Farb-, Sättigungs- und Helligkeitswerten einzustellen, Funktionen miteinander zu vermischen und noch vieles mehr. Alle Funktionen hier aufzuzählen, würde natürlich den Rahmen sprengen, deswegen solltet ihr euch unbedingt die SASS-Dokumentation (auf Englisch) anschauen, um euch ein umfassendes Bild von dieser mächtigen und umfangreichen Sprache zu machen.

Kommen wir zurück zu unserem Praxisbeispiel. Speichern wir unser „style.scss“ ab und löschen Datei „style.css“. Denn die Datei „style.css“ besitzt noch die alten CSS-Angaben. Wir möchten unsere SASS-Datei nämlich in eine CSS-Datei umwandeln. Das wird natürlich nur klappen, wenn wir SASS auch sagen, dass wir aus der Datei „style.scss“ die Datei „style.css“ erschaffen wollen. Dazu benötigen wir natürlich wieder unser Terminal (für Mac-Nutzer) bzw. unser Ruby Command Prompt (für Windows-Nutzer). Wir rufen unsere Anwendung entsprechend wieder auf und ändern zunächst den Pfad. Wir wollen nämlich, dass SASS weiß, in welchem Ordner wir Änderungen vornehmen wollen. Daher müssen wir zunächst einmal Folgendes tun:
cd [Hier den entsprechenden Pfad einfügen/eingeben]

Diese Anweisung verwenden wir, damit SASS später weiß, wo wir uns sozusagen befinden. Lasst eure Anwendung weiter geöffnet, denn nun möchten wir aus unserer SASS-Datei eine CSS-Datei machen. Das machen wir mit einer Anweisung, welche SASS von Haus aus mitbringt. Dieser lautet wie folgt:
sass --watch style.scss:style.css

Auch hier soll eine Erklärung folgen: Mit „sass“ signalisieren wir, dass wir die SASS-Anwendung ansprechen, welche wir mithilfe von RubyGems installiert haben. „--watch“ ist eine Anweisung von SASS, die dafür sorgt, dass Änderungen einer SASS-Datei entsprechende Auswirkungen auf die CSS-Datei haben. Ist keine CSS-Datei vorhanden, so wird automatisch eine erstellt und direkt in CSS-Code umgewandelt. Dadurch erklärt sich auch der letzte Teil des Codes: „style.scss:style.css“. Denn hier wird aus der „style.scss“ eine „style.css“ erstellt. Somit habt ihr mit diesem Code auch eine „style.css“-Datei erstellt. Ihr könnt diese öffnen und werdet feststellen, dass ihr ganz normalen CSS-Code vor euch habt. Ihr braucht also weder JavaScript noch PHP, um SASS zu verwenden. SASS hat diese nämlich bereits lokal in eine CSS-Datei umgewandelt.

 
Wenn ihr alles richtig gemacht habt, sollte eure Seite folgendermaßen aussehen:

Bilder


 

SASS verschachteln und Selector Inheritance

Natürlich muss man SASS nicht unbedingt zwecks der Verwendung von Variablen oder Mixins verwenden. Es kann natürlich auch vorkommen, dass die normale Schreibweise von CSS ein wenig mühselig ist und man das Ganze doch lieber wie in HTML handhaben möchte. Sprich: Eine untergeordnete Anweisung wird von einer übergeordneten Anweisung umschlossen und so gesehen in einer Baumstruktur dargestellt. Um das Ganze etwas verständlicher zu machen, soll an dieser Stelle folgendes Beispiel angeführt werden:

#logo {
font-family: ‚Alex Brush‘;

a {
color: #fff;
}

}


Schauen wir uns das Ganze nun im Detail an: Die ID mit dem Namen „logo“ ist in diesem Fall das übergeordnete Element, welche „Alex Brush“ als Schriftenfamilie hat. Das Logo umschließt ein A-Element mit weißer Schrift. Damit gehören die umständlichen Schreibweisen, wie „#logo a“, der Vergangenheit an. Wir können nämlich nun dank SASS IDs und Klassen formatieren und innerhalb dieser Elemente sogar andere Tags, wie z.B. „a“ oder „span“, formatieren. Dadurch ist alles übersichtlicher und man kann Änderungen schneller vornehmen. Das Spannende an der Sache ist jedoch, dass bei der Umwandlung von SASS in CSS die alte CSS-Schreibweise in der CSS-Datei verwendet wird. SASS zaubert also ganz regelkonformen CSS-Code hervor.

Außerdem bietet SASS die Möglichkeit, Klassen innerhalb von anderen IDs bzw. Klassen zu integrieren, sofern auch hier Angaben mehrmals vorkommen. Nehmen wir doch wieder das Beispiel mit der Border-Radius-Geschichte. Wir nehmen an, wir würden die Klasse namens „kreis“ erstellen und möchten einen Ecken-Radius von 10 Pixeln verwenden. Dann würden wir entsprechend ganz normal wie in CSS Folgendes eintippen:
.kreis {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Nun ist an dieser Stelle mit SASS etwas möglich, was normalerweise in CSS unmöglich ist. Wir können nämlich eine Klasse in andere CSS-Angaben integrieren. Nehmen wir z.B. an, wie haben ein DIV-Element mit der ID „box“, das einen blauen Hintergrund hat. Wir möchten natürlich, dass dieses Element die obigen Angaben mit übernimmt. Dazu verwenden wir den Befehl „@extend“ und fügen anschließend die entsprechende Klasse hinzu.

 
Im Beispiel mit dem DIV-Element würde das Ganze folgendermaßen ausschauen:

#box{
background: blue;
@extend .kreis;
}


Wie man also sehen kann, ist es mittels SASS problemlos möglich, Klassen in andere Elementen zu integrieren.


Compass - SASS in einfach

Wer SASS gerne verwendet, sollte unbedingt auch einen Blick in Compass werfen. Compass ist ein CSS-Framework, das mit SASS funktioniert. In diesem Framework sind alle Mixins zu jeglichen CSS3-Anweisungen enthalten. Dazu zählen unter anderem border-radius, text-shadow, box-shadow und viele andere Anweisungen.

Bilder


Wie in diesem Tutorial bereits erwähnt, kann es durchaus mühselig sein, sämtliche Präfixe -webkit, -moz, -o, usw. zu verwenden. Compass schafft dem Ganzen eine Abhilfe, weil es im Prinzip ausreicht, wenn man einen CSS3-Befehl einmalig in der SASS-Datei verwendet.

Auch hier möchte ich wieder auf das allzeit beliebte Border-Radius-Beispiel zurückgreifen. Zunächst einmal müssen wir allerdings Compass installieren. Um Compass zu installieren, rufen wir wieder unser Terminal (Mac) bzw. unser Ruby Command Prompt (Windows) auf und tippen dabei folgenden Code ein:
gem install compass

Damit hätten wir Compass im Prinzip schon installiert.

Lasst die Anwendung bitte noch geöffnet, denn nun möchten wir ein neues Compass-Projekt starten. Dazu müssen wir entsprechend den Pfad abändern, indem wir wie vorhin den folgenden Code eingeben:
cd [Hier den entsprechenden Pfad einfügen/eingeben]

Wichtig ist, dass ihr natürlich bereits wisst, wo ihr eure Projekt abspeichern wollt. Wenn ihr das Projekt z.B. unter Windows im Desktop speichern wollt, dann würde der Befehl folgendermaßen ausschauen:
cd C:\Users\~Username~\Desktop

Damit wechselt ihr den Pfad zum Desktop ab. Nun wollen wir endlich ein neues Projekt mit Compass starten. Dazu geben wir folgenden Code ein:
compass create test

Dieser Code bewirkt, dass ein Ordner namens „test“ in eurem Desktop erstellt wird, der die Roh-Daten für euer Compass-Projekt enthält. Hierbei steht der Befehl „compass“ dafür, dass ihr Compass als Anwendung ansprecht, während „create“ einen neuen Ordner erstellt, der sich in unserem Beispiel „test“ nennt. Ihr könnt natürlich auch euren Ordner anders benennen, wenn ihr möchtet. Schauen wir uns nun mal den Ordner „test“ an. Wir haben einmal den Ordner „sass“, der die Dateien „ie.scss“, „print.scss“ und „screen.scss“ enthält. Das sind die entsprechenden SASS-Dateien, mit denen ihr arbeiten könnt. Diese werden beim Speichern in CSS-Dateien umgewandelt und gelangen anschließend in den Ordner „stylesheet“. Mit der Datei „config.rb“ könnt ihr bestimmen, welchen Pfad ihr für eure SASS- und CSS-Dateien verwenden wollt. Die Variablen erklären sich hierbei von selbst, weil sie die entsprechenden Namen bereits beinhalten. So signalisiert die Variable ‚sass_dir = „sass“, dass der Pfad für die CSS-Dateien im Ordner „sass“ liegt.

Doch nun genug der vielen Erklärungen. Wir wollen ans Eingemachte gehen und nehmen uns im Ordner „SASS“ die Datei „screen.css“ vor, weil diese eben die Hauptdatei für euren CSS-Code wäre. Wenn wir die Datei öffnen, werden wir bemerken, dass einige Angaben schon enthalten sind. Die können wir zunächst einmal dort stehen lassen. Dennoch möchte ich kurz etwas zu folgender Angabe sagen:
@import „compass/reset“;

Dieser Befehl sorgt dafür, dass bestimmte HTML-Element mittels CSS in der späteren „screen.css“-Datei resettet werden. Wie ihr schon sehen könnt, wurde dabei der Befehl „@import“ verwendet. Dieser ist auch vonnöten, um wesentliche Mixins zu laden. Hier wurden entsprechende Mixins bzw. Befehle für das CSS-Reset geladen. Wie ihr welche Befehle laden könnt, erfährt ihr, indem ihr die offizielle Compass-Page aufruft und euch die Dokumentation anschaut. Wir wollen aber natürlich auch für unser Border-Radius-Beispiel entsprechende Mixins laden. Dazu rutschen wir eine Zeile tiefer und ergänzen die Datei mit dem folgenden Code:
@import „compass/css3“;

Dieser Code sorgt entsprechend dafür, dass alle CSS3-Befehle geladen werden, sobald sie deklariert werden. Das wollen wir tun und definieren ein paar Zeilen weiter unten die Klasse „kreis“ mit folgenden Angaben:

.kreis {
@include border-radius(10px);
}


Wir haben in dieser Klasse mithilfe des @include-Befehls den Mixin zum bereits gespeicherten Border-Radius-Befehl geladen. Gleichzeitig können wir in Klammern eingeben, mit welchen Pixelwerten (hier 10px) wir den Radius angeben wollen. Wir speichern das Ganze und gehen zurück in das Terminal bzw. in die Ruby-Command-Anwendung. Wir geben nun Folgendes ein:
compass watch test

Dieser Befehl sorgt dafür, dass Compass nach Veränderungen im Ordner „test“ Ausschau hält und entsprechende Änderungen der SASS-Dateien in die CSS-Dateien überträgt. Das wollen wir uns natürlich genauer anschauen und öffnen mit unserem Editor im Ordner „styles“ die Datei „screen.css“. Wir sehen nun, dass in der Klasse „kreis“ die CSS-typischen Angaben (-webkit, -moz, -o, usw.) im Border-Radius-Befehl enthalten sind. Das erleichtert uns die Arbeit ungemein. Es gibt natürlich viele weitere Mixins bzw. Befehle, die ihr verwenden könnt. Schaut euch dazu die offizielle Compass-Dokumentation an.



DVD-Werbung

Passend zum Inhalt empfehlen wir: Das ultimative Training für JavaScript und jQuery

Deine App, dein Spiel, deine Website! Lege den Grundstein zur programmiertechnischen Umsetzung deiner Ideen, gehe sogleich darüber hinaus und wende direkt und praktisch an, was du gelernt hast. Dieses Training mit 52 Lektionen lässt dich in kurzer Zeit professionell und versiert Programmzeilen schreiben. Über 10,5 Stunden Video-Tutorials, in denen du alles Wissenswerte zu Variablen, Schleifen, Funktionen oder Operatoren in JavaScript erfährst. Dazu: jQuery – die Bibliothek, die auf über 75 Prozent der weltweit erfolgreichsten Webseiten zum Einsatz kommt und dich noch coolere Internetauftritte programmieren lässt. Einmal miteinander kombiniert, ist das, was du aus JavaScript und jQuery formen kannst, mit einem Wort: mächtig! Leicht zu erlernen für Einsteiger, vertiefend für Kenner und mit den Do-it-yourself-Praxisbeispielen relevant für alle, die von noch leeren Seiten Zeile für Zeile direkt zum fertigen Programm aufsteigen möchten.

  • 52 Lektionen in über 10,5 Stunden Video-Training zu JavaScript und jQuery
  • Erlerne die Grundlagen, gehe darüber hinaus und schreibe sodann eigene Programme
  • Inklusive Praxis-Herausforderungen: Programmiere ein Quiz, ein Spiel, eine FAQ-Seite und App
  • Von Programmier-Künstler und Profi-Trainer Denis Panjuta

Setze um, was dir vorschwebt! Mit Mitteln, die sich mehr als eignen, und mit fachlich glänzender Kompetenz!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von hierkarl
  • 09.07.2015- 19:16

hört sich wirklich interessant an! werde mir bei gelegenheit das ganze mal genauer anschauen!
Danke!!

Portrait von adriansander
  • 02.09.2014- 20:12

Danke für das hilfreiche Tutorial!

Portrait von cythux
  • 22.08.2014- 17:34

Thx, Stavros

werde es mir mal genau anschauen ;-)

Tipp

wenn die Syntax scss benutzt könnt ihr auch normales CSS benutzen

aber ihr sollte euch auch mit CSS auskennen

Und benutzt nicht einen Editor wie Dreamweaver, da solche Tools nachfragen bei der gewatchten Datei ob diese neugeladen werdem soll

Portrait von medicus11
  • 19.08.2014- 21:00

Danke für das hilfreiche Tutorial....

Portrait von Kundentest
  • 19.08.2014- 19:24

Herzlichen Dank für das Tutorial.

Portrait von lora-hth
  • 19.08.2014- 17:33

Vielen Dank für das hilfreiche Tutorial!

Portrait von Domingo
  • 19.08.2014- 17:23

Das war hilfreich, vielen Dank.

Portrait von vvika
  • 19.08.2014- 15:39

Danke. Ich glaub, um dynamisches CSS kommt man nicht mehr rum. Gutes Tutorial!

Portrait von Mereel
  • 19.08.2014- 15:38

Ich bin vor einiger Zeit über SASS gestolpert und bin total begeistert. Das Tutorial kommt zwar für mich etwas zu spät, gibt aber nochmal einen schönen Überblick über die Funktionen. Vielen Dank.

Portrait von BOPsWelt
  • 19.08.2014- 14:21

Vielen Dank Stavros, klasse Tutorial mit sehr vielen Tipps und Erklärungen.

Portrait von Steve007
  • 19.08.2014- 13:41

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Steve007
  • 19.08.2014- 13:36

Vielen Dank für Dein interessantes Tutorial.

Portrait von hierkarl
  • 19.08.2014- 13:04

dankeschön,
war für mich sehr hilfreich.
:)

Portrait von klausmoll
  • 19.08.2014- 11:25

Super, vielen Dank für dieses gut verständliche Tutorial.
Schöne Grüße
Klaus

Portrait von Caesarion2004
  • 19.08.2014- 11:05

Vielen Dank für das interessante und hilfreiche Texttutorial.


Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
x
×
×