Kategorien
Development

SASS (& Compass) – Die ersten Schritte

Da ich viel mit Webdesign und Programmierung zu tun habe ist es zugegeben seltsam, dass ich mich jetzt erst mit dieser Technologie auseinandersetze, aber irgendwie hab ich davor nie die Zeit gefunden. SASS (oder zuvor LESS) ist nun schon seit einiger Zeit in aller Munde. Aber was ist eigentlich SASS?

SASS ist ein sogenannter Preprocessor. Um es vereinfacht auszudrücken: Er erweitert CSS um viele nützliche Funktionen wie Variablen, Subtemplates, mathematische Operationen benutzerdefinierte Funktionen und vieles mehr.

Ich habe mir SASS mal ein wenig angeschaut und möchte nachfolgend nun ein wenig über die Ersten Schritte berichten. Es werden aber sicher noch weitere Artikel folgen.

Die Installation lasse ich außen vor. Hierzu gibt es viele Wege und diese sind je nach Betriebssystem doch sehr verschieden. Google hilft hier, den richtigen Weg zu finden. Es braucht nur ein paar Minuten um es zu installieren und es gibt Lösungen mit GUI die sogar ohne den Terminal auskommen. Ich werde hier dennoch den Weg über den Terminal beschreiben.

Hinweis: Ich habe SASS direkt zusammen mit Compass installiert was meiner Meinung nach absolutSinn macht. Dazu vielleicht in einem späteren Artikel mehr.

Nun aber zu meinen ersten Schritten:

1) Config-Datei erzeugen

Im Projekt-Verzeichnis (was man sich irgendwo angelegt hat) führt man den folgenden Befehl aus (dazu bewegt man sich zuerst per $ cd Pfad/Projektordner in das entsprechende Verzeichnis):

$ compass config

Nun erzeugt compass eine Config-Datei: config/compass.rb die ich nun entsprechend meinen Wünschen angepasst habe:

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

2) Die erste SCSS-Datei erzeugen

So wie ich das verstehe gibt es zwei Syntaxen die man verwenden kann: SASS oder SCSS. SCSS ist die neuere Schreibweise und gleicht im wesentlichen CSS mit einigen Ergänzungen. SASS kommt ohne geschweifte klammern und Semicolons aus und benutzt hier nur Zeilenumbrüche:

/* SASS - Syntax */
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

/* SCSS - Syntax */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Ich habe mich also entschieden und mein erstes Dokument sass/screen.scss angelegt und direkt mal möglichst viel eingebaut. Was SASS so alles kann bzw zumindest einen kleinen Überblick bekommt ihr hier.

/* Variablen */
$font:			'Open Sans', 'Helvetica Neue', sans-serif;
$font-size: 	1em;
$color:			#333;

/* Mixins */
@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}

@mixin box-shadow($r, $g, $b, $a, $r1, $r2, $r3){
	-webkit-box-shadow: rgba($r,$g,$b,$a) $r1 $r2 $r3;
	-moz-box-shadow: rgba($r,$g,$b,$a) $r1 $r2 $r3;
	-ms-box-shadow: rgba($r,$g,$b,$a) $r1 $r2 $r3;
	box-shadow: rgba($r,$g,$b,$a) $r1 $r2 $r3;
}

body {
	font-family: $font;
	color: $color;
	font-size: $font-size;
}

.box {
	@include border-radius(10px);
	@include box-shadow(0,0,0,0.2,0px,1px,3px);

	.heading { color: red; }
	
	h1 { @extend .heading; font-size: $font-size + 0.9em; }
	h2 { @extend .heading; font-size: $font-size + 0.6em; }
	h3 { @extend .heading; font-size: $font-size + 0.3em; }
}

3) CSS-Datei erzeugen lassen

Nun einmal kurz in den Terminal  und den compile befehlt ausgeführt:

$ compass compile

Und schon erzeugt mir (nachdem ich zuvor einen Fehler beseitigen musste.. an Fehlermeldungen bei CSS muss ich mich wohl gewöhnen) das Script folgenden CSS-Code in css/screen.css:

/* Variablen */
/* Mixins */
/* line 21, ../sass/screen.scss */
body {
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  color: #333333;
  font-size: 1em;
}

/* line 27, ../sass/screen.scss */
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  -ms-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
}
/* line 31, ../sass/screen.scss */
.box .heading, .box h1, .box h2, .box h3 {
  color: red;
}
/* line 33, ../sass/screen.scss */
.box h1 {
  font-size: 1.9em;
}
/* line 34, ../sass/screen.scss */
.box h2 {
  font-size: 1.6em;
}
/* line 35, ../sass/screen.scss */
.box h3 {
  font-size: 1.3em;
}

4) Ordner überwachen

Wer nicht immer $ compass compile  eingeben will wenn er eine Änderung gemacht hat kann Compass auch anweisen den Ordner zu Überwachen und automatisch beim speichern die Dateien zu kompilieren:

$ compass watch

 

Fazit

Auch wenn ich bisher irgendwie immer einen Bogen um SASS gemacht habe fange ich schon an es zu bereuen. SASS ist auf jeden Fall einen Blick wert und scheint mir viele meiner täglichen Probleme zu lösen und Arbeitsabläufe zu erleichtern. Über das ein oder andere werde ich sicher noch bloggen.

Wenn du es noch nicht getan hast: Wirf einen Blick auf SASS und probiere es selber aus. Es lohnt sich trotz der Hürde der Installation oder des ungewohnten Arbeitens im Terminal.

Von Luke

Blogautor, Webdesigner, Programmierer, Tontechniker, Kameramann, Musiker, Christ, und vieles mehr

1 Antwort auf „SASS (& Compass) – Die ersten Schritte“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.