Ein CSS-Präprozessor, der CSS um Funktionen wie Variablen, verschachtelte Regeln und Mixins erweitert.
SCSS ist eine Syntax-Erweiterung für CSS, die das Schreiben von Stylesheets effizienter und wartbarer macht. Es führt Konzepte aus der Programmierung in CSS ein, darunter Variablen (z.B. für Farben), Mixins (wiederverwendbare Codeblöcke) und verschachtelte Regeln, die die Struktur des HTML widerspiegeln. Der SCSS-Code wird vor der Verwendung in normales CSS umgewandelt, das von jedem Browser verstanden wird.
Diese Werkzeuge helfen, Redundanz zu vermeiden und grosse, komplexe Stylesheets übersichtlich zu halten. SCSS ist neben LESS einer der beliebtesten CSS-Präprozessoren.
scss
/* SCSS-Variable für die Hauptfarbe von BINARY one */
$binary-one-green: #00FF00;
.button-primary {
background-color: $binary-one-green;
border: 1px solid darken($binary-one-green, 10%);
&:hover {
background-color: lighten($binary-one-green, 5%);
}
}
