imported>SchlurcherBot: Bot: http → https

2025-12-04T05:25:21Z

Bot: http → https

Neue Seite

{{Infobox Programmiersprache
| Name = Sass
| Logo =[[Datei:Sass Logo Color.svg|180px|Sass-Logo]]
| Beschreibung = 
| Paradigma =
| Erscheinungsjahr = 2007
| Designer = [[Hampton Catlin]]
| Entwickler = [[Natalie Weizenbaum]], [[Chris Eppstein]]
| AktuelleVersion = 1.86.0<ref>{{Internetquelle |url=https://github.com/sass/dart-sass/releases |titel=Releases Dart Sass · sass/dart-sass |sprache=en |abruf=2025-03-26}}</ref>
| AktuelleVersionFreigabeDatum = 17. März 2025
| AktuelleVorabVersion =
| AktuelleVorabVersionFreigabeDatum =
| Typisierung =
| Implementierung =
| Dialekte =
| Standardisierungen =
| Beeinflusst_von = [[Cascading Style Sheets|CSS]], [[YAML]]
| Beeinflusste = [[Less (Stylesheet-Sprache)|Less]], [[Stylus (Stylesheet-Sprache)|Stylus]]
| Betriebssystem = [[Plattformunabhängigkeit|Plattformunabhängig]]
| Lizenz = [[MIT-Lizenz]]
| Website = [https://sass-lang.com/ sass-lang.com]
}}

'''Sass''' ('''''S'''yntactically '''A'''wesome '''S'''tyle'''s'''heets'') ist eine [[Stylesheet-Sprache]], die als CSS-[[Präprozessor]] mit Variablen, Schleifen und vielen anderen Funktionen, die [[Cascading Style Sheets]] (CSS) nicht beinhaltet, die Erstellung von CSS vereinfacht und die Pflege großer Stylesheets erleichtert. Sie wurde ursprünglich beeinflusst von der [[Auszeichnungssprache]] [[YAML]], von Hampton Catlin entworfen und von Natalie Weizenbaum entwickelt.

Nach der Fertigstellung der initialen Version setzte Weizenbaum zusammen mit Chris Eppstein die Arbeit an Sass fort und implementierte mit SassScript eine einfache Scriptsprache zum Gebrauch innerhalb von Sass-Dateien. Neben der unter [[MIT-Lizenz]] für viele Plattformen verfügbaren kommandozeilenbasierten [[Compiler]]software haben sich weitere Verarbeitungsprogramme etabliert.

Neben der ursprünglichen an YAML angelehnten Sass-Syntax unterstützt Sass auch die neuere und heute weiter verbreitete SCSS-Syntax, die sich an der klassischen CSS-Schreibweise orientiert.

== Merkmale ==
=== Geschachtelte Regeln ===
Eines der Schlüsselmerkmale sind verschachtelte Regeln (''nested rules''). Durch diese ist es einfach, komplizierte geschachtelte Selektoren zu lesen und zu schreiben.

<syntaxhighlight lang="sass">
#header
background: #FFFFFF
/* -or- :background #FFFFFF */

.error
color: #FF0000

a
text-decoration: none
&:hover
text-decoration: underline

</syntaxhighlight>

Dies wird kompiliert zu:

<syntaxhighlight lang="css">
#header {
background: #FFFFFF;
}
#header .error {
color: #FF0000;
}
#header a {
text-decoration: none
}
#header a:hover {
text-decoration: underline
}
</syntaxhighlight>

==== Geschachtelte Media Queries ====
Eine besondere Funktion stellt die Verschachtelung von Media Queries in Selektoren dar. So können im [[Quelltext|Quellcode]] Style-Deklarationen für ein und dasselbe Element am gleichen Ort verwaltet werden.
<syntaxhighlight lang="sass">
#header
color: red
@media (min-width: 400px)
color: blue
</syntaxhighlight>

Dies wird kompiliert zu:

<syntaxhighlight lang="css">
#header {
color: red;
}
@media (min-width: 400px){
#header {
color: blue;
}
}

</syntaxhighlight>

=== Variablen ===
Sass erlaubt die Nutzung von Variablen. Dies erleichtert es, bestimmte Werte in umfangreichen Stylesheets konsistent zu halten. Wartungsaufgaben werden durch die Definition der Variablen an zentraler Stelle erheblich vereinfacht.

<syntaxhighlight lang="sass">
$link_color: #00F

a
color: $link_color
</syntaxhighlight>

Wird kompiliert zu

<syntaxhighlight lang="css">
a {
color: #00F
}
</syntaxhighlight>

=== Mixins ===
Mixins erlauben die wiederholte Referenzierung ganzer Code-Abschnitte. In Anlehnung an die in klassischen Programmiersprachen vorhandenen Funktionen können Mixins auch Argumente übergeben werden. Mixins können, wie normale Anweisungen auch, weitere geschachtelte Selektoren enthalten. Im folgenden Beispiel wird die Variable <code>$farbe</code> im Mixin dem Element als Hintergrundfarbe zugewiesen.

<syntaxhighlight lang="sass">
@mixin box($farbe)
padding: 1rem
border: 2px solid gray
background: $farbe

a
@include box(red)
</syntaxhighlight>

Wird kompiliert zu

<syntaxhighlight lang="css">
a {
padding: 1rem;
border: 2px solid gray;
background: red;
}
</syntaxhighlight>

== SCSS-Syntax ==
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.

=== Codevergleich ===
==== Sass ====
<syntaxhighlight lang="sass">
$meineFarbe: #3BBFCE

.navigation
border-color: $meineFarbe
color: darken($meineFarbe, 9%)
</syntaxhighlight>

==== SCSS ====
<syntaxhighlight lang="scss">
$meineFarbe: #3BBFCE;

.navigation {
border-color: $meineFarbe;
color: darken($meineFarbe, 9%);
}
</syntaxhighlight>

Das kompilierte CSS ist in beiden Fällen identisch. Eine automatische Umwandlung zwischen den beiden Syntax-Varianten ist ohne Probleme möglich.

== SassScript ==

''SassScript'' ist eine [[Skriptsprache]], die innerhalb von Sass zur Anwendung kommt. SassScript erweitert Sass um Funktionen wie Grundrechenarten, Methoden zur Manipulation von Farbwerten, einfache Schleifenkonstrukte und [[Bedingte Anweisung und Verzweigung|Fallunterscheidungen]].

== Kritik ==
Die Nutzung einer Metasprache für CSS erfordert die Übersetzung in CSS-Code durch einen [[Präprozessor]] und damit einen weiteren Schritt im Entwicklungsprozess. Kritisiert wird das damit einhergehende erschwerte [[Debugging]] sowie das Erweitern potenzieller Fehlerquellen. Auch könne der [[Kaskadierung]]sgedanke von CSS verloren gehen, der mit der Vergabe von Klassen gegeben ist.<ref>{{Webarchiv | url=http://www.shiftedwork.de/blog/2010/09/09/uber-den-unsinn-von-css-frameworks | wayback=20100913062722 | text=Über den (Un)Sinn von CSS Frameworks}}</ref>

== Siehe auch ==
* [[Less (Stylesheet-Sprache)]]
* [[Stylus (Stylesheet-Sprache)]]

== Weblinks ==
* [https://sass-lang.com/ Official Website] (englisch)
* [https://github.com/sass/sass Sass source code repository (Git)] (englisch)
* [http://groups-beta.google.com/group/haml?hl=en Haml/Sass Google Group] (englisch)
* [http://www.elementsystems.de/tipps-und-tricks/sass-tutorial-deutsche-uebersetzung/ Deutsche Übersetzung des SASS Guides] (deutsch)

== Einzelnachweise ==
<references />

{{SORTIERUNG:Sass (StylesheetSprache)}}
[[Kategorie:Stylesheet-Sprache]]
[[Kategorie:Freies Programmierwerkzeug]]
[[Kategorie:Datenformat]]
[[Kategorie:Ruby (Programmiersprache)]]
[[Kategorie:Cascading Style Sheets]]
[[Kategorie:Templatesprache]]

Sass (Stylesheet-Sprache) - Versionsgeschichte

imported>SchlurcherBot: Bot: http → https