Prägnante und strukturierte Stylesheets mit SCSS

in  Basics ,

Prägnante und strukturierte Stylesheets mit SCSS

Auch wenn es für einige Leser ein alter Hut ist, so gibt es dennoch sicherlich andere, die noch keine Erfahrungen mit Less oder Sass haben. Daher sei einmal das sehr leicht zu erlernende SCSS (Sassy CSS) vorgestellt, mit dem sich stufenlos Sass-Funktionen in CSS einfügen lassen.

Der Einstieg

Bereits die grundlegenden Funktionen, wie Variablen und Verschachtelung, helfen dabei, die Stile deutlich einfacher zu handhaben. Redundanzen werden vermieden und die Änderbarkeit erhöht. Die beiden verlinkten Seiten zeigen dies mit anschaulichen Beispielen.

Es wird nicht lange dauern, bis man kein “nacktes” CSS mehr schreiben möchte. Man gewöhnt sich automatisch an die intuitivere Deklaration mit SCSS.

Die nächste Stufe

Noch mehr Flexibilität bringen die zwei Konzepte der Mixins und der Extensions. Vereinfacht ausgedrückt kann man Stile in eine Art Funktion packen und diese an mehreren Stellen verwenden. Dabei sind auch Parameter möglich. Das folgende Beispiel habe ich kürzlich in einem Projekt verwendet, in dem mehrere und unterschiedliche Schatten benötigt wurden:

1
2
3
4
5
@mixin boxShadow($strength: 5px) {
    -webkit-box-shadow: $strength $strength 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: $strength $strength 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: $strength $strength 5px 0px rgba(0, 0, 0, 0.75);
}

Dies kann dann innerhalb eines Blocks so aufgerufen werden:

1
@include boxShadow(10px);

Logische Anweisungen

Welche Power jedoch noch in Sass steckt, merkt man erst, wenn man sie benötigt. So lassen sich auch Bedingungen und Schleifen nutzen. Eine Einführung lässt sich in diesem Artikel nachlesen.

Einen Anwendungsfall hatte ich bei der Anpassung von Bootstrap Popovers: hier mußten die Pfeile in allen Richtungen umgefärbt werden. Entweder man schreibt vier mal das selbe oder man definiert eine Schleife über die vier Richtungen, was zu folgendem Code führt:

1
2
3
4
5
6
7
$popoverDirections: top right bottom left;
@each $direction in $popoverDirections {
    .bs-popover-auto[x-placement^="#{$direction}"] .arrow::after,
    .bs-popover-#{$direction} .arrow::after {
        border-#{$direction}-color: $modal-gray;
    }
}

Im fertigen CSS ergibt dies dann folgende Ausgabe:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
.bs-popover-auto[x-placement^="top"] .arrow::after,
.bs-popover-top .arrow::after {
    border-top-color: #c9cacc;
}
.bs-popover-auto[x-placement^="right"] .arrow::after,
.bs-popover-right .arrow::after {
    border-right-color: #c9cacc;
}
.bs-popover-auto[x-placement^="bottom"] .arrow::after,
.bs-popover-bottom .arrow::after {
    border-bottom-color: #c9cacc;
}
.bs-popover-auto[x-placement^="left"] .arrow::after,
.bs-popover-left .arrow::after {
    border-left-color: #c9cacc;
}

Weitere Beiträge in Kategorie Basics

CSS-Konzepte spielerisch lernen
- Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten. Mit der Umstellung von …
Twig: kleine Syntax-Anpassung mit deutlichem Einspareffekt
- Der folgende Tipp hilft dabei, den Code-Umfang häufiger Abfragen in Twig-Templates zu reduzieren. Dies verbessert die Lesbarkeit enorm und hilft dabei, die Logik in den Templates intuitiver zu …
Funktionale Programmierung in Twig: Collections deklarativ verarbeiten
- Seit kurzem haben neue Funktionen in die Template-Engine Twig Einzug gehalten. Diese verändern die Art und Weise, wie mit mehrwertigen Daten umgegangen wird, fundamental. Aus diesem Grund soll dieser …
Kategorien in Zikula - weit mehr als nur Themen
- Der Zikula Core enthält eine zentrale Verwaltung für Kategorien, mit denen man vielfältige Lösungen umsetzen kann. Die häufigste Verwendung von Kategorien ist sicherlich eine thematische Zuordnung von …
Probleme mit Error Tracking proaktiv erkennen
- Sobald ein Programm oder eine Internetseite erst einmal produktiv verwendet wird, stellt sich heraus, ob alle Eventualitäten bedacht sind oder ob doch etwas nicht berücksichtigt worden ist. Spätestens …