SASS Tutorial Guide + SCSS erklärt | Anfänger Tutorial 2024

Sass Beginenr Coding Lab Steffen Lippke Tutorials und Guides

Man nehme ein paar Buchstaben C, S, A und mixe sie:

SCSS, CSS, SASS

Dieses Tutorial erklärt Dir, was diese Abkürzungen bedeuten und wie Sie Dein Web-Projekt voranbringen können.

Möchtest Du lernen, wie Du mit CSS Zeit sparen kannst und effizienter arbeiten kannst?

Dann bist Du genau hier richtig.

3 Simple Erklärungen für CSS, Sass, SCSS

Was sind CSS (Cascading Stylesheets)?

Wenn HTML das Grundgerüst Deiner Webseite ist, verleiht CSS den Objekten auf Deiner Webseite die Farbe und Form.

Die Cascading Stylesheets sind Gestaltungsbögen, mit dem Du Deine Objekte auf der HTML veränderst. Du definierst z. B. …

  • Größe
  • Farbe
  • Textfarbe
  • Position

einer Box, eines Eingabefelds, eines Texts.

Die CSS ermöglicht Animation und Effekte, wenn der Nutzer interagiert: Z.B. Du ziehst die Maus über einen Button und dieser verfärbt sich (HOVER-Animation).

Was ist Sass (Syntactically Awesome Stylesheets)?

Sass ist für Dich der Maler für Dein Web-Projekt. Du bist Chef aller Maler und sagst kurz und knapp, was Du machen willst.

Die Maler führt wiederkehrende Aufgaben aus, stellt für Dich die Farben zusammen und mischt diese nach Deinen Vorgaben.

Sass ist ein Framework, welches die Funktionen für CSS erweitert. In Sass bzw. SCSS programmierst Du und er Sass-Compiler übersetzt die SCSS-Dateien zu normales CSS-Dateien.

Was ist SCSS (Sassy CSS)?

SCSS oder Sassy CSS ist eine Programmiersprache mit etwas andere Syntax und Notation wie CSS.

Ziel der Programmiersprache ist genau das Gleiche wie bei CSS.

5 Vorteile von Sass – Wie soll ich Sass nutzen?

Sass soll Dich beim Schreiben von CSS-Code unterstützen. Ionic verwendet Sass, um Tipparbeit zu sparen. Wenn Du mal die hybride App-Entwicklung mit Ionic testen möchtest, habe ich für Dich ein Beginner Tutorail geschreiben.

Die CSS-Dateien bei vielen Webprojekten können schnell sehr groß (1000 Zielen und mehr). Wegen Ihrer Größe sind diese sehr unübersichtlich und bedeuten viel Tipparbeit.

Da CSS lediglich sagt, wie die Objekte auszusehen haben

CSS ist sehr statisch, ohne Iteratoren oder Variablen.

Wenn Du aber eine Farbpalette Dir ausgesucht hast, nutzt Du immer die gleichen 6 Farben. Kommt der Kunde vorbei und sagt, dass dieser alles in Pink-Blau-Kariert mit Goldrand und Animationen haben will, dann hast Du viel zu tippen.

  1. Bessere Übersicht
  2. Automatisierung von CSS
  3. Feature: Variablen
  4. Weniger Code
  5. Weniger HTTP-Request wegen Kombination von CSS

3 Schritte zum Sass-Erfolg. Das Sass Tutorial.

#1 Installation

Für Sass muss Node.js auf Deinen PC installiert sein. Node.js ist ein Paketmanager für JavaScript Code. Diese kannst Du in allen Webprojekten einsetzen, um Schreibarbeit und Zeit zu sparen.

Installiere Dir Node.js

Download Node.js

Dann tippst Du folgendes Kommando in Deinem Projekt ein.

npm install -g node-sass

#2 Einbinden

Erstelle ein Web-Projekt mit .html Datei und arbeite wie gewohnt. Der einzige Unterschied ist der Import eine SCSS-Datei anstatt einer normalen CSS-Datei.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sass Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <ul>
            <li>Test</li>
            <li>SCSS</li>
            <li>Sass</li>
            <li>CSS</li>
        </ul>
    </div>

    <div class="tollerButton absenden">Absenden</div>
    <div class="tollerButton ok">OK</div>

</body>
</html>

Erstelle eine CSS Datei mit Deinen Stylesheets.

#3 Automatisieren

Gebe in eine Bash / Terminal den folgenden Befehl ein.

Sass –watch inputSass.scss output.css

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

body {
    font: 100% $font-stack;
    color: $primary-color;
}

// Nesting / Schtelung
div {
    li {
        color: brown;
    }
}

// SCSS-Datei "mehr.scss" wird importiert
@import "mehr"

Sobald Du etwas in der SCSS-Datei änderst, führt sich das Sass-Skript automatisch aus und die erhältst eine normale CSS-Datei. So kannst Du live beim Arbeiten an der SCSS-Datei die Ergebnisse im Browser die ansehen.

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

div li {
  color: brown;
}

* {
  font-size: 40px;
}

li:first-child {
  font-weight: bold;
  color: red;
}

.tolleButton, .ok, .absenden {
  font-size: 14px;
  color: white;
  text-align: center;
  padding: 10px;
  margin: auto;
}

.absenden {
  background-color: red;
}

.ok {
  background-color: green;
}

/*# sourceMappingURL=style.css.map */

Neue Funktionen des Super CSS

Splitten von CSS mit @import

@import kann andere SCSS Dateien importieren. Wenn Du eine große CSS Datei hast, kann dieser Weg Dir wieder Übersicht verschaffen.

Teile Deine CSS in verschiedene Abschnitte.

Erstelle SCSS Dateien für

  • Global: für z.B. Schriftarten und Farbthemen, die im ganzen Projekt gelten sollen
  • Aufgeteilt nach …
    • Komponenten: Buttons, Tabellen, Karten
    • Funktionen: Formulare, Blog-Ansicht, Sozial
    • Webseiten: Home, Kontakt

Das Aufteilen erleichtert das Navigieren und Code wiederfinden.

Weniger Tippen mit @extend

Extend übernimmt die CSS-Statements aus anderen Selektoren, sodass Du diese nicht zweifach schreiben musst.

@extend <name> nimmt die bestehenden CSS Kommandos und überträgt diese in den Selektor.

*  {
    font-size: 40px;
}

@mixin danger-text {
    font-weight: bold;
    color: red;
}

li:first-child {
    @include danger-text;
}

.tolleButton {
    font-size: 7px * 2;

    color: white;
    text-align: center;
    padding: 10px;
    margin: auto;
}

.absenden {
    @extend .tolleButton;
    background-color: red;
}

.ok {
    @extend .tolleButton;
    background-color: green;
}

CSS Variablen

Variablen speichern Werte von Farben, Längen, Abstände, Einstellung in Form eines Strings. Wenn Du einen Wert immer wieder verwendest, solltest Du eine Variable nutzen, um Code zu sparen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


Jeden Monat teile ich mit Mitgliedern
4 neue praxisnahe Tutorials (je 1000+ Wörter).


Trage Deine Mail, damit Du
Deine Coding + Hacking Skills erweitern kannst!

Die Webseite nutzt nur technisch notwendige Cookies.