SCSS-Snippets

Eine Snippet-Sammlung für SCSS (aka Sass).

SCSS erweitert CSS um einige nützliche Funktionen. Da jede CSS-Datei bereits eine gültige SCSS-Datei ist, ist die Migration sehr einfach.

Verwendung

FIXME Genaue Anleitung

config.rb erstellen. Diese Datei beschreibt, wo die SCSS-Dateien sind und wohin das CSS generiert werden soll und wie (lesbar oder komprimiert).

SCSS aufrufen:

compass watch /path/to/config/

SCSS überwacht nun die SCSS-Datei und generiert das CSS, sobald sich die Datei ändert.

Variablen

SCSS:

$blue: #3bbfce;
.bla1 {
  border-color: $blue;
}
.bla2 {
  color: $blue;
}

Wird zu CSS:

.bla1 {
  border-color: #3bbfce;
}
.bla2 {
  color: #3bbfce;
}

Inline-Variablen

SCSS:

$str: 'test';
.example-#{$str} {
  color: black;
}

$str: 'foo';
.example-#{$str} {
  color: black;
}

Wird zu CSS:

.example-test {
  color: black;
}

.example-foo {
  color: black;
}

Berechnungen

SCSS:

$var1: 8px;
$var2: 16px;
$var3: 3px;

.example1 {
  border: $var1 / 2 solid blue;
}
.example2 {
  margin:$var2 * $var3;
}

Wird zu CSS:

.example1 {
  border: 4px solid blue;
}
.example2 {
  margin: 48px;
}

Farb-Funktionen

Bei den Funktionen aus example1 ist der erste Parameter eine Farbe und der zweite ein Prozentwert.

Siehe:

• Übersicht über SCSS-Funktionen

SCSS:

.example1 {
  color: darken(yellow, 10);
  background: lighten(blue, 30);
  border-color: saturate(#aa0000, 10);
}
.example2 {
  background: mix(yellow, red);
}

Wird zu CSS:

.example1 {
  color: #cccc00;
  background: #9999ff;
  border-color: #aa0000;
}
.example2 {
  background: #ff7f00;
}

Nesting

Kind-Elemente können einfach innerhalb ihres Eltern-Elements definiert werden.

SCSS:

.example {
  background: lighten(blue, 30);

  .child {
    background: red;
  }
}

Wird zu CSS:

.example {
  background: #9999ff;
}
.example .child {
  background: red;
}

Mixins

SCSS:

@mixin add-stuff($color) {
  color: $color;
  background-color: #000;

  .child {
    padding: 5px;
  }
}

.example {
  @include add-stuff(blue);
}

Wird zu CSS:

.example {
  color: blue;
  border-color: #000;
}
.example .child {
  padding: 5px;
}

Compass

Installation von Compass

Zunächst einmal muss man Compass installieren.

Unter Mac:

brew install ruby
sudo gem install compass

Dann muss man die Compass-Konfigurationsdatei erstellen. Dazu erzeugt man die Datei resources/scss/config.rb mit folgendem Inhalt:

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/../../"
css_dir = "../css"
sass_dir = "."
images_dir = "../images"
#output_style = :compressed
#javascripts_dir = "javascripts"
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

Das Beispiel passt für ein ExtJS4-Projekt. Alternativ kann man die Datei auch von Compass erzeugen lassen. Den genauen Befehl kann man sich in der Compass-Installationsanleitung zusammenbauen lassen.

Nun kann man das SCSS-Verzeichnis überwachen lassen. Compass stellt jede Änderung an den SCSS-Dateien fest und baut dann die CSS-Version. Damit ist ein schnelles arbeiten nach dem dem Motto "SCSS ändern, Speichern, zum Browser wechseln, Reload" möglich.

Überwachung des SCSS-Verzeichnisses:

compass watch resources/scss/

Verwendung von Compass

Für SCSS gibt es eine Mixin-Bibliothek mit dem Namen Compass.

FIXME Compass ist mehr. Nutzt Ruby

Referenz: http://compass-style.org/reference/compass/

SCSS, das Compass verwendet:

@import 'compass';

.example {
  @include border-radius(5px);
}

Wird zu CSS:

.example {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

Compass bietet dabei auch Konfigurations-Variablen an, über die man z.B. bestimmen kann, für welche Browser Spezial-Support rein soll. Damit kann man beispielsweise manche der speziellen Browser-Regeln im Beispiel oben abschalten.