SCSS anstelle von CSS nutzen

Erstellt am
Zuletzt aktualisiert am
durchapprex IT Team
Print
Du bist hier:
< Alle Themen

Vorneweg: Dieser Artikel ist ein Profi Artikel, welcher sich an WebdesignerInnen und WebentwicklerInnen richtet.

Wenn dein Custom CSS einmal länger werden sollte, empfiehlt es sich das absolute Profi Feature „SCSS“ zu nutzen.

SCSS aktivieren

Unter deinen Einstellungen findest Du im Reiter Design den CSS Codeblock. Dort befindet sich auch die Frage nach SCSS. Aktiviere SCSS und nutze den Code Block unterhalb von CSS.

Beispiel

Dieses Kapitel dient zur Demonstration und als Einführung, damit Du verstehst, was genau SCSS ist. Nachfolgend zeigen wir dir ein Beispiel.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
  p { margin: 5px; }
}

wird zu:

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

body p {
  margin: 5px;
}

Variablen

SCSS kann Variablen definieren. Eine Variable beginnt mit einem Dollarzeichen ($) und gefolgt vom Variablenbezeichner.
Das heißt etwa, dass Du dir die Variable $primary-color: #333; zu Beginn deines SCSS Codes definierst, und später im SCSS Code einfach wiederverwenden kannst.

Etwa für color: $primary-color;  oder background-color: $primary-color; . Der Wert wird jeweils automatisch durch den der Variable ersetzt.

Code Blöcke und „Vererbung“

Es ist keine wirkliche Vererbung, dennoch folgt es dem Prinzip. Angenommen Du möchtest die Überschriften erster und zweiter Ebene von Kursen gestalten. Dann nimmst Du entsprechend des CSS Guides die Klasse main.course und hängst darunter die Stylings für h1, h2, h3 usw. Das ergibt folgendes Beispiel:

main.course h1 { ... }
main.course h2 { ... }
main.course h3 { ... }

Mit SCSS kannst Du diesen Block erheblich vereinfachen, indem Du die Klammern anders setzt, nämlich:

main.course {
  h1 { ... }
  h2 { ... }
  h3 { ... }
}

Erkennst Du den Unterschied? Es ist sofort ersichtlich, dass h1, h2 und h3 eines main.course Blocks gestyled werden. Das mag jetzt für dich noch nicht der Grund schlecht hin für Vererbung sein, aber angenommen Du verkettest dich noch tiefer, dein CSS Code geht über hunderte (gar tausende Zeilen) und hast einen Block folgender CSS Regeln:

main.kurse div.articles-list div.card div.offer-caption { color:#fff; background: #18B974 !important; }
main.kurse div.articles-list div.card div.card-footer { background: transparent !important; }
main.kurse div.articles-list div.card { border: 1px solid #E1E1E1; }
main.kurse div.articles-list div.card div.card-body { padding-top: 10px !important; }
main.kurse div.articles-list div.card div.card-body h2 { margin-top: 4px; font-size: 1.2rem !important; line-height: 1.5rem !important; }
main.kurse div.articles-list div.card div.card-body .content-excerpt { font-size: 14px; }
main.kurse div.articles-list div.card div.card-body .author-container { display: none !important; padding-top: 20px; }
main.kurse div.articles-list div.card div.card-body .author-info .author-name { font-weight: 800 !important; color: #222; }
main.kurse div.articles-list div.card div.card-body .author-info .author-bio { color: #888 !important; }

Dann siehst du, dass der Code sehr schnell unübersichtlich wird. Daher haben wir SCSS implementiert. Der zweite Code Block wäre (auszugsweise) wie folgt zu schreiben:

main.kurse {
  div.articles-list {
     div.card { 
       div.offer-caption { ... }
       div.card-footer { ... }
       div.card-body {
          ...
        }
     }
  }
}

Du siehst dass diese Art der Notation deutlich aufgeräumter ist, cleaner und du weißt genau, was worunter hängt.

SCSS lernen

Wenn dir diese Art der CSS Notation gefällt, empfehlen wir dir SCSS zu lernen. Wenn Du aber nicht weißt, was CSS ist, dann nutze einfach die von apprex gegebenen Styling Möglichkeiten.

Inhaltsverzeichnis