CSS Preprocessors
CSS Präprozessoren machen das Leben von Designern und Entwicklern wesentlich einfacher, da sie die besten Methoden bieten, um komplexen CSS-Code zu pflegen, manche davon sind mit richtigen Programmiersprachen vergleichbar. Als ich CSS Variablen entdeckt habe, hat sich die Welt für mich verändert. Ich muss mich nicht mehr über unstrukturierten CSS ärgern. Den Stress, die gleichen
Variables
Wie du bereits weißt, sind Variablen Elemente, die einen bestimmten Wert zu einer bestimmten Zeit haben. Der Wert einer Variablen kann sich während der Ausführung eines Skripts ändern. Gleiches gilt auch hier, man kann, zum Beispiel, eine Farbe als Variable definieren und statt jedes Mal den HEX-Code zu schreiben, einfach dieses Objekt verwenden. Bei umfassenden Web-Projekten, kann doppelter CSS-Code das Leben schwer machen. Variablen helfen dabei, doppelten Code zu reduzieren. Dadurch wird es viel leichter komplexen CSS zu verwalten. Beispiel:
$farbe-rot: #ff0000 $farbe-blau: #0000ff $farbe-gruen: #00ff00 #element { font-size: 12px color: $farbe-rot }
Du brauchst keine großen Kenntnisse, um den Code zu verstehen. Für SASS, ändern wir die Erweiterung von .css zu .scss, dann fügen wir den CSS-Code ein, und fertig, schon schreibst du SASS.
Nesting
Wenn du in der Web-Entwicklung arbeitest, wirst du verstehen, wie chaotisch und unorganisiert CSS am Ende eines Projekts wird. Du hast Hunderte Selektoren zur Auswahl und jeder hat seine eigenen Regeln. Die Nutzung eines CSS Präprozessoren, wird dir helfen, diesen Stress zu vermeiden. Wenn du an Nesting denkst, denk an HTML. Es ist eine visuelle Hierarchie, welche die Übersicht erhöht. Vorher:
.sidebar { float: right; } .sidebar h1 { font-size:24px; color: red; } .sidebar ul { width: 100%; margin: 0; padding: 0; }
Nachher:
.sidebar { float: right; h1 { font-size: 24px; color: red; } ul { width: 100%; margin: 0; padding: 0; } }
Mixins
Das ist eine Gruppe von Definitionen, die gemäß bestimmter Parameter oder statischen Regeln kompiliert wird. Sie werden beispielsweise häufig für Hintergrund Gradienten verwendet: Beispiel:
@mixin gradient($start-colour, $end-colour) { background-color: $start-colour; background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour)); background-image: -webkit-linear-gradient(top, $start-colour, $end-colour); background-image: -moz-linear-gradient(top, $start-colour, $end-colour); background-image: -ms-linear-gradient(top, $start-colour, $end-colour); background-image: -o-linear-gradient(top, $start-colour, $end-colour); background-image: linear-gradient(top, $start-colour, $end-colour); filter: progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}'); } body { @include gradient(#FFC107, #E91E63); }
Demo: http://codepen.io/brandonhimpfen/pen/doreEN/
Extends
Extends bietet eine Möglichkeit, allgemeine Definition mehrfach zu nutzen, ohne sie zu kopieren. Extended-Selektoren sind in kompilierten CSS gruppiert. Es bietet die Möglichkeit, ein Styling einmal zu erstellen und dann einfach über @extend auf die spezifischen HTML-Codeblöcke anzuwenden, sodass sie das gewünschte Aussehen erhalten, das du willst.
.button { border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } .red-button { @extend .button; background: red; color: white; }
If / Else Statements
Das ist für weiter fortgeschrittene und für kleine Projekte wahrscheinlich gar nicht notwendig, aber IF-Bedingungen sind nützlich, wenn dein Code an bestimmte Voraussetzungen geknüpft sein soll. Dies bietet Flexibilität, um die benötigte Logik zu schreiben, die du brauchst.
Loops
Der @for Loop wiederholt einen Codeblock für eine bestimmte Anzahl (n)-Mal, vom Startindex bis zu dem letzten Index. Die grundlegende Syntax für diese Schleife ist: Beispiel:
$colors: red, orange, yellow, green, blue, purple; @for $i from 1 through length($colors) { li:nth-child(#{length($colors)}n+#{$i}) { background: nth($colors, $i) } }
Demo: http://codepen.io/cimmanon/pen/yoCDG Loops sind wichtig und auch nicht schwer, und macht SASS mehr zu einer richtigen Programmiersprache.
Math
Manchmal kann Mathe im CSS nützlich sein. Du kannst verschiedene Operatoren wie Plus, Minus, Subtrahieren, Prozentsätze für eine Vielzahl von spezifischen Fällen nutzen.
Import
Das ist auch möglich, ohne einen CSS-Präprozessor dabei zu verwenden,. Die Idee ist, den Code in mehrere CSS-Dateien zu aufzuteilen und diesen dann in eine Haupt CSS-Datei importieren. Beispiel:
@import “bootstrap”; @import “reset”;
Die Installation kann beängstigend und schwierig sein, aber die Features sind den Versuch wert, denn sie ermöglichen es, Code zu schreiben, der sowohl leichter zu schreiben als auch später leichter zu pflegen ist. Du hast die Möglichkeit, Variablen und Funktionen zu erstellen und es ist einfacher, deine Projekt zu pflegen und schnell Änderungen vorzunehmen, wie Farben, Breiten und andere Regeln, ohne dabei in der gesamten CSS Datei zu suchen.
Wie man anfängt?
Wenn ich dich neugierig gemacht habe, oder wenn ich dich schon überzeugt habe, fragst du dich, wo du anfangen oder wie du starten sollst. Es gibt ein paar CSS Präprozessor Sprachen, wie SASS, LESS, Stylus, die du wählen kannst. https://github.com/showcases/css-preprocessors
Das könnte Dich auch interessieren
Mit jQuery herausfinden, ob eine Checkbox angewählt ist (oder nicht)
Ich musste einen Weg finden mit jQuery zu überprüfen, ob eine Checkbox ausgewählt wurde. In jQuery ist es möglich zunächst zu überprüfen ob eine Checkbox...
Richtig Recherchieren: Wie funktioniert eine Recherche im Internet?
Richtig recherchieren kann jeder, stimmt's? Recherchen müssen nur Praktikanten machen, damit sie früh genug verstehen, dass die Arbeit nicht immer spannend se...
Der Zusammenhang von Psychologie und Projektmanagement
Neben unterschiedlichen Methoden, spielen auch gewisse Züge der Psychologie eine wichtige Rolle im Projektmanagement. Der Duden definiert Psychologie wie folgt...