Anzeige
Anzeige
UX & Design
Artikel merken

CSS leicht gemacht – wichtige Kniffe für mehr Übersicht

Wer Webseiten baut, kommt an CSS nicht vorbei. Und dank breiter CSS3-Unterstützung der Browser bieten sich die Stylesheets zunehmend für komplexere Aufgaben an, etwa abgerundete Ecken oder Schattierungen. Mit wachsendem Einsatz nehmen aber auch Umfang und Komplexität der CSS-Dateien zu. Höchste Zeit also, die Wartung der Layouts mit Hilfsmitteln zu vereinfachen.

4 Min. Lesezeit
Anzeige
Anzeige

Beim Bau einer CSS-Datei kommt es nicht selten vor, dass man für verschiedene Elemente ähnliche oder gar redundante Anweisungen vornimmt. Bestes Beispiel hierfür sind Farbangaben. Aber auch Angaben für Formatierungen, Abstände oder Größen weisen häufig Abhängigkeiten innerhalb einer oder mehrerer CSS-Dateien auf. Ein Programmierer würde hier wiederkehrende Elemente zentral definieren, Vorlagen verwenden und den eigentlichen CSS-Quellcode anschließend generieren lassen. Genau das ist der Ansatz von Syntactically Awesome Stylsheets (SASS) [1]. CSS-Stylesheets werden um Möglichkeiten erweitert, die Zusammenhänge zwischen verschiedenen Angaben in Form einer eigenen „Sprache“ notieren.

Anzeige
Anzeige

Eines der Ziele bei der Entwicklung der nächsten TYPO3-Generation 5.x (Codename „Phoenix“) war es, wo möglich auf Grafiken zu verzichten und gestalterische Elemente durch die reine Verwendung von HTML und CSS abzubilden. Dies erleichtert dann auch die einfache und zentrale Anpassbarkeit. Entsprechend verwundert es wenig, dass sich die Entwickler entschieden, die CSS-Angaben mit Hilfe von SASS aus zentralen Layout-Definitionen zu generieren.

Bei SASS existieren zwei verschiedene Syntax-Varianten. Die klassische Syntax (Dateiendung .sass) verzichtet auf Klammern und setzt stattdessen auf Einrückungen zur Gliederung von Elementen. Die ab SASS3 unterstützte „SCSS“-Syntax („Sassy CSS“, dt.: freches CSS, Dateiendung .scss) hingegen setzt auf CSS3, verwendet also Klammern und erweitert CSS um zusätzliche Möglichkeiten. Innerhalb eines Projekts ist es auch möglich, SASS- und SCSS-Syntax zu mischen. Je Datei findet aber jeweils nur eine Syntax Anwendung. Im Folgenden liegt der Fokus auf der SCSS-Syntax.

Anzeige
Anzeige

Erste Schritte

Das Werkzeug zur Umwandlung von SCSS/SASS-Code in CSS-Code selbst ist in Ruby geschrieben. Aber keine Angst: Wer das Tool nicht im Kern erweitern, sondern einfach nur nutzen möchte, benötigt keine Ruby-Kenntnisse. Nach Installation des Ruby-Gems „haml“ per „gem install haml“ ist das SASS-Tool auch schon für den ersten Einsatz bereit. Wer ein HAML-Paket seiner Linux-Distribution nutzen möchte, sollte beachten, dass dies die SCSS-Syntax erst ab Version 3.0 unterstützt.

Anzeige
Anzeige

Mit „sass style.scss:style.css“ ist die Konvertierung einer einzelnen Datei möglich. Alternativ können hier auch Quell- und Zielverzeichnis angegeben werden, die dann rekursiv abgearbeitet werden. Mit „sass –watch style.scss:style.css“ ist es außerdem möglich, einen Live-Modus zu aktivieren, bei dem die Quelldateien auf Änderungen beobachtet und die Zieldateien automatisch neu generiert werden.

Wie die Ausgabe aussieht, bestimmt das „–style“-Attribut. Standardmäßig aktiv ist „nested“; Einrückungen also, die die CSS-Hierarchie leserlich darstellen. Alternativ lassen sich die Angaben über „compressed“ auf das Nötigste reduzieren oder mittels „compact“ auf eine Zeile komprimieren.

Anzeige
Anzeige

Variablen

Jede gültige CSS3-Datei ist automatisch auch eine gültige SCSS-Datei. Ein zu Beginn häufig verwendetes Beispiel ist die zentrale Definition von Farben und Größenangaben mit Hilfe von Variablen. Diese werden in der Form „$variablenname“ angegeben, gefolgt von einem Doppelpunkt sowie dem gewünschten Wert, der selbst eine gültige CSS-Angabe ist. Auch ist es möglich, einfache mathematische Konstrukte wie Additionen oder Multiplikationen zu nutzen. Für diverse andere Anwendungen stehen sogar Funktionen bereit, etwa zur Berechnung von Farbwerten.

Variablen und Funktionen
$dark-white: #f1f1f1;
$grey: lighten(#000000, 20%);
$light-grey: #9e9e9e;
$small-radius: 3px;
$mid-radius: 5px;

a.link-help {
	color: $light-grey;
}

div.button {
	width: 20px - 2*$small-radius;
}

Listing 1

Wiederkehrende Angaben lassen sich auch per „mixin“ auslagern und dann über „include“ an verschiedenen Stellen nutzen. Dabei ist die Angabe von optionalen Parametern möglich – ganz im Stil programmierter Funktionen.

Mixin und Include
@mixin rounded-corners-middle-right {
	-moz-border-radius: 0 $mid-radius $mid-radius 0;
	-webkit-border-radius: $mid-radius;
}

@mixin spacing($margin: 5px) {
	margin-right: $margin;
}

.errorMessages {
	@include rounded-corners-middle;
	@include spacing(10px);
	border: 1px solid #000000;
}

Listing 2

Verschachteln

Besonders hilfsreich ist die Verwendung von verschachtelten Angaben. Sie erleichtern den Überblick, geben den Definitionen klare Strukturen und ermöglichen auf einfache Weise beispielsweise die Umbenennung einer class-Angabe.

Anzeige
Anzeige
Einrücken und verschachteln
table.menu {
	background-color: blue;
	td.active {
		font-weight: bold;
		label {
			margin-left:10px;
		}
	}
}

div.headline {
	font: {
		weight: bold;
		size: 1.2em;
	}
}

Listing 3

Ergebnis in CSS
table.menu { background-color: blue; }
table.menu td.active { font-weight: bold; }
table.menu td.active label { margin-left: 10px; }
div.headline { font-weight: bold; font-size: 1.2em; }

Listing 4

Vererben

Vererbung
.important {
	font-weight:bold;
}
.headline {
	font-size:1.2em;
}
.importantErrorheadline {
	@extend .important;
	@extend .headline;
	color: red;
}

Listing 5

Durch die Vererbung von einem oder mehreren Selektoren ist es möglich,
selbst komplizierte Abhängigkeiten einfach und strukturiert abzubilden.
Auch ist die Vererbung entlang einer Kette von Selektoren ist möglich.

Ergebnis in CSS
.important, .importantErrorheadline { font-weight: bold; }
.headline, .importantErrorheadline { font-size: 1.2em; }
.importantErrorheadline { color: red; }

Listing 6

Auslagern und Einbinden

Wiederkehrende Werte und Definitionen werden bestenfalls bereits zu Beginn ausgelagert. Dies ermöglicht es, die im weiteren Verlauf eines Projekts üblicherweise stetig steigende Komplexität der CSS-Angaben auf ein überschaubares Maß zu reduzieren. Auch lassen sich so Module in verschiedenen CSS-Dateien zentral und einfach wiederverwenden. Dank mathematischer Ausdrücke und Funktionen lassen sich so Ursprungswerte wie die zu verwendende Bildschirmbreite zentral ändern und abhängige Werte automatisch neu berechnen.

Einbinden
@include „Dateiname“;

Listing 7

Beginnt der Dateiname mit einem
Unterstrich, signalisiert dies SASS übrigens, dass die Datei nicht in eine
eigenständige CSS-Datei zu konvertieren ist. Sie wird stattdessen lediglich als Modul
innerhalb anderer Dateien genutzt.

Anzeige
Anzeige

Fazit

Die Möglichkeit beispielsweise Längen, Abstände und Farben zentral zu definieren erhöht die Übersichtlichkeit bereits enorm [2]. Verbunden mit mathematischen Operationen, Funktionen und wiederverwendbaren Blöcken wird es auf flexible Weise möglich, mit CSS-Angaben zu „programmieren“. Der Funktionsumfang lässt sich zudem durch andere Bibliotheken, etwa Compass [3], erweitern – sie bringen fertige Mixins, Vorlagen und eine wachsende Community. Durch die Generierung von standard-konformem CSS3 lässt sich SASS/SCSS außerdem ohne Anpassung mit allen Browsern nutzen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige