SASS & Compass

Die neuen Anforderungen an modernes Webdesign haben gezeigt, dass traditionelles CSS an seine Grenzen stösst. Dabei sind das fehlen von Variablen, Funktionen und das aufwändige Schreiben von Responsiven Designs nur einige Beispiele. Um den heutigen Anforderungen des Internets und seinen Benutzer gerecht zu werden wird für die Web-Projekte von gyselroth in Zukunft SASS (Syntactically Awesome Style Sheets) eingesetzt. Compass ist ein Plugin für SASS, welches die Syntax und Funktionaltität für die Arbeit mit CSS3 sinnvoll ergänzt.

Links

• http://sass-lang.com/
  • Offizielle SASS Website
• http://compass-style.org/
  • Offizielle Compass Website
• http://www.sache.in/
  • SASS und Compass Extension Repository
• http://alistapart.com/article/getting-started-with-sass/
  • Einstiegshilfe für SASS

SASS vs. SCSS¹

Obwohl an dieser Stelle und auch im Internet meistens von SASS gesprochen wird, ist eigentlich SCSS gemeint. Leider ein etwas verwirrender Umstand mit einem einfachen Hintergrund: SCSS ist vereinfacht gesagt die V2.0 von SASS. Die Syntax wurde in dieser Version in der Benutzung vereinfacht und mehr an der CSS-Syntax orientiert. Auch die Lesbarkeit des Codes wurde somit verbessert.

Schnelleinstieg

Die SASS-Syntax orientiert sich von der Schreibweise her sehr nahe an der CSS-Syntax. Somit können Ungeübte und Einsteiger auch einfach normales CSS in eine SASS Datei schreiben und erhalten das gleiche Ergebnis. Trotzdem ist SASS in der Schreibweise logischer, aufgeräumter und effektiver. Folgend die wichtigsten Möglichkeiten, die SASS bietet:

1. Verschachtelung

Die SASS-Syntax lässt sich genau wie HTML verschachteln. Optisch ist es so einfacher zu erkennen, welche Stile zu welchem Element gehört. Ausserdem erübrigen sich so ellenlange Selektoren. Beim Verschachteln sollte aber darauf geachtet werden wenn möglich nicht über 3 Ebenen hinaus zu schiessen! Beim Parse (automatisches umschreiben in CSS) wird die Verschachtelung dann in einen validen CSS-Selektor umgewandelt.

SCSS

.footer-wrap {
    .left {
        float: left;
        width: 50%

        .meta-nav {
            color: #fff;
            margin-right: 5px;
        }
    }
}

CSS

.footer-wrap .left {
    float: left;
    width: 50%;
}

.footer-wrap .left .meta-nav {
    color: #fff;
    margin-right: 5px;
}

2. Variablen

Mit Variablen können immer wiederkehrende Werte an einer stelle für das ganze Layout definiert werden. Meistens handelt es sich dabei um Farben und Schriften aber es können natürlich auch ganze Formate (via @extend s.u.) definiert werden.

/* Colors */
$purple-heart: #6018E7;
$curious-blue: #1896E7;

/* Variables */
$background: $purple-heart;
$text-color: $curious-blue;

Anmerkung

Bei Farben macht es Sinn, die Verwendung über ein Alias zu lösen. Somit kann klarer geregelt werden, wo die Farbe zum Einsatz kommen soll und bei der Verwendung von Templates kann an einer Stelle die Zuweisung der Farbe geändert werden².

3. Extend

Eine Selektor kann einfach mit der Definition eines anderen oder einem “Definitions-Template” erweitert werden. So kann sicher gestellt werden, dass z.B. alle Verwendungen von Konturen oder Radien gleich sind. Auch hier sollte die Anwendung aber in Grenzen gehalten werden.

SCSS

/* extend-template */
%rounded-border {
    border-radius: 5px;
}

.an-item {
    color: $text-color;
    margin-top: 20px;
}

.an-other-item {
    @extend %rounded-border
    @extend .an-item

    margin-bottom: 20px;
}

CSS

.an-item,
.an-other-item {
    color: $text-color;
    margin-top: 20px;
}

.an-other-item {
    border-radius: 5px;
    margin-bottom: 20px;
}

4. Mixins

Mixins sind ganze Funktionen, die einzelne Werte oder ganze Codefragmente zurückliefern. Die Syntax ist ähnlich wie bei JavaScript.

SCSS

@mixin rounded($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.item {
    @include rounded(3px);

    color: $text-color;
}

CSS

.item {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: $text-color;
}

5. Ausgabe

Über eine config.rb kann gesteuert werden, wie das SASS nach CSS konvertiert werden soll. z.B. wird festgelegt ob Kommentare ausgelassen werden sollen oder wie stark der Code “komprimiert” werden soll. Ausserdem werden weitere *.scss Dateien, die per @import eingebunden wurden, direkt in die Root-Datei geschrieben. So kann also das ganze CSS schlussendlich ohne mehraufwand in einer einzelnen Datei abgelegt werden.

6. Weiteres

• Berechnung können direkt als Mathematische Formel im Code platziert werden (Hinweis: Immer einen Leerschlag vor und nach Operatoren einfügen!)
  • Beispiel: width: (300px – 10);
• Es stehen diverse Methoden für Farben, Einheiten, usw. zur Verfügung.
  • Beispiel: lighten($color, $amount)

Installation

Sowohl SASS als auch Compass benötigen das Ruby on Rails³ Framework. Auf Mac OS X Systemen ist dies standardmässig installiert.

Mac OS X

Das Programm Terminal öffnen und folgende Befehle ausführen:

$ sudo gem update --system
$ sudo gem install sass
$ sudo gem install compass

Update

Entsprechend der Installation werden auch Updates über die Konsole via Ruby on Rails durchgeführt.

Version Prüfen

$ sass -v
$ compass -v

Gems aktualisieren

# Update all gems
$ sudo gem update

# OR update sass
$ sudo gem update sass

# OR update compass
$ sudo gem update compass

Projekt in PhpStorm anlegen

PhpStorm verfügt von Haus aus über Dateiüberwacher, die sich bei Webprojekten mit SASS-Code automatisch um das parsen des Codes kümmern. Allerdings ist es dazu erfoderlich, dass für jedes Vorkommen von *.scss Dateien auch eine config.rb vorliegt. Diese legt fest von wo Dateien gelesen und wo sie gespeichert werden sollen. Jede Konfiguration kann nur eine Ordnerstruktur abdecken. Gibt es also z.B. mehrere Themes muss für jede Struktur eine eigene Konfiguration angelegt werden.

Muster einer config.rb

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
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

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass css/sass scss && rm -rf sass && mv scss sass

Obwohl sich diese Dateien theoretisch von Hand anlegen lassen, macht es Sinn diese Aufgabe gleich dem Ruby on Rails Framework zu überlassen. Dazu muss allerdings wieder das Terminal bemüht werden. Ruby on Rails erstellt dann automatisch die config.rb und die benötigten Ein- und Ausgabeordern.

Konfiguration und Ordnerstruktur anlegen

Am einfachsten lässt sich die config.rb und die entsprechende Ordnerstruktur gleich über PhpStorm mit dem Terminal-Fenster (View > Tool Windows > Terminal [alt + 12]) erstellen. Natürlich kann es auch über die normale Konsole erledigt werden⁴.

Eingabe

# With 'cd' navigate to required destination (use 'cd ..' to move up one level)
$ cd web/style/

# create sass konfig and folder structure
$ compass create --sass-dir "sass" --css-dir "css" --images-dir "img" --javascripts-dir "js" --bare

Ausgabe (Datei- und Ordnerstruktur)

|style/
|
|-- .sass-cache/
|-- css/
|-- sass/
|-- img/
|-- js/
|-- config.rb

Anmerkungen

• Der Parameter –bare kann auch weg gelassen werden. In diesem Fall würde SASS zusätzlich zur Ordnerstruktur und der Konfiguration noch ein Grundset von *.scss-Dateien (screen.scss, ie.scss, print.scss) erzeugen. Meistens macht es aber Sinn mit einer leeren Struktur zu starten.
• Wir haben uns entschieden den css und sass Ordner auf einer Ebene zu halten, damit bei der Angabe von Pfaden für Bilder o.ä. keine Unklarheiten entstehen.

PhpStorm Filewatcher einrichten

Was jetzt noch fehlt ist ein Dateiüberwacher, der Änderungen an *.scss Dateien feststellt und diese automatisch parst. Ein Filewatcher kann über die Einstellung PhpStorm > Preferences > File Watchers definiert werden. Folgende Konfiguration sollte für alle Projekte gültig sein, sofern sie mit der oben genannten Ordnerstruktur für die SASS-Dateien angelegt wurde.

Compass Support aktivieren

Das Kompiliern von SASS-Dateien sollte mit dem oben eingerichteten Filewatcher bereits funktionieren. Leider erkennt phpStorm allerdings beim Schreiben des Styles die Compass ausdrücke nocht nicht. Damit das der Fall ist muss über PhpStorm > Preferences > Compass Support noch die Compass Unterstützung eingeschaltet werden.

Zusätzlich zur Aktivierung des Supports muss in der basic.scss noch per include die Compass mixin Bibliothek geladen werden. Nähere Informationen zum Einbinden von Dateien und Bibliotheken weiter unten.

@import "compass";

Anmerkungen

• Die Platzhalter ($xy$) sollten immer über die Insert Marco… Funktion eingefügt werden.
• Ein File Watcher mit dieser Konfiguration ist in der Lage beliebig viele Unterordner mit SASS-Dateien und Konfigurationen zu überwachen.
• Trotz des erstellen File Watchers kann es vorkommen, dass PhpStorm darauf hinweist einen File Watcher für den *.scss Dateityp einrichten zu wollen. Diese Meldung sollte ignoriert bzw. abgelehnt werden.
• Neben den File Watchers findet sich in der Konfiguration von PhpStorm auch eine Funktion Compass Support. Diese funktioniert an sich auch einwandfrei, kann aber nur immer mit einer config.rb arbeiten, was bei grösseren Projekten leider oft nicht der Fall ist.
• Bei Änderungen der config.rb muss PHPStorm unter Umständen neu gestartet werden, damit diese wirksam werden.

Atomic Design

Das Frontend-Team hat beschlossen zukünftig bei der Ablage von Style-Informationen auf die Logik von Atomic Design⁵ zurück zu greifen. Dabei werden einzelne Elemente des Designs in 3 oder 4 Gruppen unterteilt. Der gebrauch dieser Technik ist im Internet leider nicht einheitlich dokumentiert⁶. Wir haben uns aber für folgenden Zwischenweg entschieden:

• Quarks
  • Variablen
• Atoms
  • Einzelne HTML-Elemente
• Molecules
  • Ansamlung einzelner HTML-Elemente
• Organisms
  • Sektionen auf einer Seite

Diese vier Stufen der Element-Einteilung zeichnen sich in einem Projekt durch die entsprechende Ordnerstruktur aus. Zusätzlich fügen wir noch den Ordner Physic (Layoutgesetze), Themes (Wertalternativen) und Verndors (Fremd-Styles) hinzu, was foldenge Ordernsturktur ergibt:

| css/
| img/
| js/
| sass/
|
|-- physic/				# Mixins & Reset
|   |-- _reset.scss
|   |-- _mixins.scss
|   |-- _grid.scss
|
|-- quarks/				# Variables
|   |-- _quarks.scss
	OR
|   |-- _all.scss		        ## Reference for all styles
|   |-- _color.scss
|   |-- _font.scss
|   |-- _format.scss
|
|-- atoms/				# HTML elements
|   |-- _atoms.scss
    OR
|   |-- _all.scss		        ## Reference for all styles
|   |-- _button.scss
|   |-- _table.scss
|   |-- ...
|
|-- molecules/			        # Widgets
|   |-- _all.scss
|   |-- _navigation.scss
|   |-- _search.scss
|   |-- ...
|
|-- organisms/			        # Layout sections
|   |-- _all.scss		        ## Reference for all styles
|   |-- _header.scss
|   |-- _footer.scss
|   |-- ...
|
|-- templates/			        # Layouts
|   |-- _all.scss		        ## Reference for all styles
|   |-- _main.scss
|
|-- themes/				# Variables, Adjustmenst (also for Vendor)
|   |-- _halloween.scss
    OR
|   |-- _halloween-quarks.scss
|   |-- _halloween-organisms.scss
|   |-- ...
|
|-- vendor/				# Foreign code (don't edit!)
|   |-- _all.scss		        ## Reference for all styles
|   |-- _jquery.ui.scss
|   |-- ...
|
|-- main.scss
|-- halloween.scss
|-- _shame.scss			        # Bugfixes, copied code

Spezielle Dateien

• main.scss
  • Ist, neben eventuellen Theme-Dateien, die einzige, die als *.css geparst wird. Sie importiert alle Atomic Elemente und die _shame.scss
• _all.scss
  • Fasst alle Elemente eines Bereiches mit @import zusammen.
• _shame.css
  • Kopierter Code oder schnelle Anpassungen sind hier abzulegen. Die Datei wir in main.scss nach allen anderen Styles importiert, so dass alle vorherigen Definitionen überschrieben werden können. Sie soll dabei helfen den effektiven Code sauber zu halten.

Dateien Importieren

In SASS werden Dateien, die nur für den Import in eine andere Datei gedacht sind mit einem Unterstrich beginnend benannt (z.B. _shame.scss). Ausserdem werden Dateien mit einem Unterstrich als erstes Zeichen des Dateinamens vom SASS-Parser ignoriert. Beim Verknüpfen der Dateie über @import kann die Dateiendung ausgelassen werden (z.B. @import “_shame”;). Ausserdem werden Dateien mit einem Unterstrich als erstes Zeichen des Dateinamens vom SASS-Parser ignoriert. Beim Verknüpfen der Dateien über @import kann die Dateiendung und der Unterstrich ausgelassen werden.

Zwei korrekte Varianten des Imports

@import "1_quarks/quarks";
@import "2_atoms/_atoms.scss";

Konventionen

Unsere Code Konvention für SASS und CSS richtet sich in erster Linie nach den CSS Guidlines V2.0⁷. Beim festlegen von Identifiern und Klassen ist bei grossen Projekten OOCSS bzw. BEM Namenskonvention sinnvoll.

SCSS-Lint

Um einen einheitlichen Programmierstil zu gewährleisten wird die Verwendung von SCSS-Lint (https://github.com/brigade/scss-lint#configuration) empfohlen. Für PhpStorm steht ein entsprechendes Plugin zur Verfügung (https://plugins.jetbrains.com/plugin/7530).

Abweichungen

Im Gegensatz zum SCSS-Lint benutzen wir folgende Abweichungen vom Standard:

• Wir verwenden immer dopplete Anführungszeichen (Double-Quotes)
• Wir arbeiten mit einem Einzug von 4 Leerzeichen
• Wir schreiben HEX-Werte in Grossbuchstaben

Um die Standard-Definition zu überschreiben kann für das akuelle Projekt eine Konfigurations-Datei mit dem Namen .scss-lint.yml angelegt werden. Die oben genannten Anpassungen sind mit den folgenden Konfigurations-Angaben innerhalb dieser Datei möglich:

linters:
  StringQuotes:
    style: 'double_quotes'
  Indentation:
    width: 4
  HexNotation:
    style: 'uppercase'
  PropertyUnits:
    properties:
      margin: ['em', 'rem']
      padding: ['em', 'rem']
      font-size: ['rem', 'em', '%']
      line-height: []
  SelectorFormat:
    convention: 'hyphenated_BEM'

Zusätzlich zu den Richtlinien prüft diese Konfiguration auch, ob für Schriften und Abstände relative Masseinheiten verwendet wurden und ob bei der Verwendung von Klassen und ID die weiter unten definierten Namens-Richtlinien beachtet wurden.

Bekannte Probleme

Parsing-Fehler ohne @charset “UTF-8”

$ locale

$ sudo nano ~/.bash_profile

export LANG=de_CH.UTF-8
export LC_ALL=de_CH.UTF-8

1. Identifier & Klassen

• Keine Gross-/Kleinschreibung
• Nur a bis z und Bindestrich verwenden
• Unterstriche kommen nur im Zusammenhang mit OOCSS⁸ zum Einsatz
• Wörter mit Bindestrich trennen
• Englische Bezeichnungen verwenden
• Abkürzungen mit Bedacht einsetzen

Korrekt

.my-class
.footer-left-navigation
.ft-left-navigation

Falsch

.myClass
.footerleftnavigation
.my_Class
.meine-Klasse
.ft-l-nv

2. OOCSS

tbd

3. Referenzierung

ID’s sind in CSS verhältnismässig mächtig und können bei einer erneuten Formatdefinition nur überschrieben werden, wenn erneut eine ID angegeben wird. Ausserdem dürfen ID’s nur einmalig auf einer Seite vorkommen. Aus diesem Grund sollte wenn immer möglich auf ID selectoren in Stylesheets verzichtet werden. Für JavaScript u.Ä. sind ID-Selektoren aber durchaus sinnvoll!

Auf eine Elementklassifizierung sollte wenn möglich ebenfalls verzichtet werden. Dadurch wird eine Klasse flexibler.

Korrekt

.footer .left .navigation
[id=footer] .left .navigation /* this only applies if html can not be changed */

Falsch

#footer .left .navigation
#footer div.left div.navigation

4. Code Dokumentation

Eine saubere Code Dokumentation dient dem Wiedereinstieg oder dem gemeinsamen Arbeiten an einem Webprojekt. Jedes SASS und CSS Dokument sollte immer ausreichend Dokumentiert werden. Am Anfang des Dokuments sollte kurz definiert werden, dass der Nutzen des Dokuments ist und vor allem auch für welche Browser der Code geschrieben wurde.

Dokumentkopf

/**
 * Website
 *
 * Style
 *
 * Description (optional)
 *
 * @project	www.mysite.com
 * @package	f.ex. quarks:color, atom:button
 * @author	Name
 * @copyright   Copyright (c) YYYY, gyselroth GmbH
 * @css-for	Firefox 20+, Chrome 25+, IE 9+, Safari 5+
 * @license	http://www.gnu.org/copyleft/gpl.html GNU GPL v3
 */

Abschnitte und Inline

/*------------------------------------*\
    $SECTION
\*------------------------------------*/

.item {
    overflow: hidden; /* inline documentation */
}

5. Mobile First

Um für Mobile Geräte das Datenaufkommen so gering wie möglich zu halten, sind Stylesheets sowie alle anderen Daten in erster Linie unter dem Mobile First-Gedanken zu erstellen. Dabei ist darauf zu achten, dass die Stylesheets auch mit dem entsprechenden Media-Query eingebunden werden.

1. http://www.sitepoint.com/whats-difference-sass-scss [↩]
2. http://davidwalsh.name/sass-color-variables-dont-suck [↩]
3. http://rubyonrails.org [↩]
4. http://compass-style.org/install/ [↩]
5. http://patternlab.io/about.html [↩]
6. http://www.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/ [↩]
7. https://github.com/rnarian/CSS-Guidelines/ [↩]
8. http://www.prowebdesign.ro/introduction-to-oocss-and-responsive-behavior-designing-a-one-page-site-with-simple-responsive-template/ [↩]