Seite 4: Import und Schleifen

Inhaltsverzeichnis

Kontrollierter Import

CSS-Dateien mit der @import-Syntax direkt zu importieren ist in den meisten Fällen keine gute Idee, denn die daraus entstehenden Anfragen (ein http-Request pro Datei) verlangsamen den Ladevorgang zusätzlich. CSS-Präprozessoren importieren (ebenfalls mit dem @import-Befehl) auf eine völlig andere Art und Weise: Während des Kompiliervorgangs wird der Inhalt der importierten Datei direkt mit einbezogen, um am Ende nur eine einzige CSS-Datei auszuliefern. Durch das Konkatenieren reicht es völlig aus, Mixins und Variablen an einer zentralen Stelle zu definieren, um sie von überall verwenden zu können.

Aufgepasst: CSS-Präprozessoren ignorieren beim @import-Befehl Dateien mit einer .css-Endung. Importieren lassen sich somit nur proprietäre Dateien, die beispielswiese auf .less, .scss, .sass oder .styl enden.

/* file.{type} */
body {
  background: black;
}
 
@import "reset.css";
@import "file.{type}";
p {
  background: white;
}

Die kompilierte Ausgabe zeigt, dass reset.css nicht berücksichtigt wurde:

@import "reset.css";
body {
background: black;
}
p {
background: white;
}

Farbe und Mathematik

Color Functions sind eingebaute Funktionen, die Farben bei der Kompilierung ändern können. Sie können vor allem bei Farbverläufen oder bei :hover-Effekten nützlich sein.

lighten($color, 10%); /* gibt eine Farbe, die 10% heller als $color ist, zurück */
darken($color, 10%);  /* gibt eine Farbe, die 10% dunkler als $color ist, zurück */
 
saturate(@color, 10%); 
desaturate(@color, 10%);
 
$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}

Das sind bei weitem nicht alle enthaltenen Farbfunktionen – weitere Informationen dazu gibt es in der LESS-, Sass- und Stylus-Dokumentation.

In allen Sprachen lassen sich mathematische Operationen durchführen. Sass und Stylus unterstützen arithmetische Operationen zwischen unterschiedlichen Einheiten. Die Präprozessoren eignen sich aber nicht nur für einfache Mathematik, sondern können auch komplexere Aufgaben, wie Rundungen oder einen Min- beziehungsweise Max-Wert aus einer Liste zu ermitteln, lösen.

body {
    margin: (14px/2);
    top: 50px + 100px;
    right: 100px - 50px;
    left: 10 * 10;
}

Schleifen aller Arten

In Sass und Stylus lassen sich normale if/else-Anweisungen verwenden. LESS hingegen setzt auf sogenannte CSS Guards, die hilfreich sind, wenn nicht auf einfache Werte, sondern auf Expressions gematcht wird, genau wie es die @media-Query-Feature-Spezifikation beschreibt.

Sass

@if lightness($color) > 30% {
    background-color: black;
}
@else {
    background-color: white;
} 

LESS

.mixin (@color) when (lightness(@color) > 30%) {
    background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
    background-color: white;
}

Stylus

if lightness(color) > 30% {
    background-color black;
} else {
    background-color white;
}

Sowohl Sass als auch Stylus unterstützen die for-Direktive. LESS setzt wiederum auf CSS Guards und rekursive Mixins:

Sass

@for $counter from 1px to 3px {
    .border-#{counter} {
        border: $counter solid black;
    }
}

LESS

.loop(@counter) when (@counter > 0){
    .loop((@counter - 1));

    .border-@{counter} {
        border: 1px * @counter solid black;
    }
}

Stylus

for counter in (1..3) {
    .border-{counter} {
        border: 1px * counter solid black;
    }
}