# CSS / SASS / SCSS

Durch plain CSS können schnell deine Stylesheets an Grösse gewinnen und unübersichtlich werden. SASS und SCSS dienen dir als Preprozessoren Struktur und Ordnung hineinzubringen und lassen sich dementsprechend kürzen. Zusätzlich erweitern Sie CSS mit Programmierfunktionen:

* Variabeln (variables)
* Verschachtelungen (nestings)
* Operatoren
* Mixins, Extends, Funktionen, usw.

Angular und Ionic setzen voll und ganz auf SCSS.

## Preprocessors

Ein Preprocessor nimmt deine SCSS-Datei und wandelt Sie in eine herkömmliche CSS-Datei um. Denn dein Browser versteht nur CSS, kein SASS oder SCSS.\
Es gibt diverse Programme die dir diese Umwandlung abnehmen, egal ob Terminal, Programm oder in Ionic direkt - die Idee bleibt die gleiche. Im Beispiel unten ist zu sehen, dass SASS Tabulatoren verwendet, SCSS jedoch Klammern. In der Fachliteratur wird daher oft SASS synonym mit SCSS beschrieben.

*Codebeispiel:*

<figure><img src="https://1951332971-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfaRLpqjavHkOOr8FPTA1%2Fuploads%2Fu68BPhTM9ykEapJnEXA6%2Fassets_-LB2Pij5al0zyqCKEUsZ_-LEjaN_xfPkE7XPrASbt_-LEjaQQReySb4hIjXYUZ_sass-vs-scss.png?alt=media&#x26;token=6bd03b04-2fc6-4ad0-80a2-479024543676" alt=""><figcaption></figcaption></figure>

Neben der oben beschriebenen Sass-Syntax (indented syntax) verfügt Sass über die neuere und heute weiter verbreitete SCSS-Syntax (Sassy CSS). Hier sind für die Verschachtelung der Selektoren nicht die Einrückung des Quelltextes ausschlaggebend, sondern wie in der klassischen CSS-Schreibweise die geschweiften Klammern. Auch sind am Ende der Regeln Semikola erforderlich.\
\
Was kann der Browser anzeigen: HTML, CSS & JS ... aber nicht PUG/Jade, SCSS/SASS oder Typescript.

<figure><img src="https://1951332971-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfaRLpqjavHkOOr8FPTA1%2Fuploads%2FdE24g9WBQm3TEKDpdTED%2FHTML_CSS_JS_Body.png?alt=media&#x26;token=bc2795cf-95c9-46ab-ae1f-c74e58c119aa" alt=""><figcaption></figcaption></figure>

## Variablen

Du kannst ganz einfach Variablen in Sass definieren. Oft werden Variablen für Grössen oder Farben verwendet.

```html
<div class="wrapper">
  <h1>Variablen</h1>
  <h2>Ich liebe diese verschiedene Farben!</h2>
</div>
```

```scss
// SCSS: Variablen
// ----
$farbe-blau: #34495E;
$farbe-rot: #E74C3C;
$farbe-gruen: #2ECC71;
$groesse: 20px;

$hintergrund: $farbe-blau;

.wrapper {
  background: $hintergrund;
}
h1 { 
  font-style: italic;
  color: $farbe-rot;
}
h2 {
  font-size: $groesse;
  color: $farbe-gruen;
}
```

Wird zu CSS Code kompiliert:

```css
.wrapper {
  background: #34495E;
}

h1 {
  font-style: italic;
  color: #E74C3C;
}

h2 {
  font-size: 20px;
  color: #2ECC71;
}
```

## Nesting

Bei der Verschachtelung kann man sich einiges an Platz sparen und wie im HTML DOM die effektive Struktur der Seite stylen.

```html
<h1>Ausserhalb eines DIV</h1>
<div class="wrapper">
  <h1>In einem DIV</h1>
</div>
```

```scss
// SCSS: Nesting
// ----
h1 { 
  color: red; 
}

.wrapper {
  h1 { 
  font-style: italic;
  color: black;
  }
}
```

Wird zu CSS Code kompiliert:

```css
h1 {
  color: red;
}

.wrapper h1 {
  font-style: italic;
  color: black;
}
```

## Operatoren

Operatoren sind eine ziemlich nützliche Sache.

```markup
<h1>Dies ist eine Box die durch Operatoren 15x grösser ist:</h1>
<div class="box">
</div>
```

Die SCSS-Datei

```scss
// SCSS: Operatoren
// ----
$faktor: 15;
h1 { 
  color: black; 
}

.box {
  background: red;
  height: 20px;
  width: 10px * $faktor;
}
```

wird zur CSS-Datei:

```css
h1 {
  color: black;
}

.box {
  background: red;
  height: 20px;
  width: 150px;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://m335.ict-bz.ch/tag-1/css-sass-scss.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.