SASS / SCSS

Hallo Lutz

Mir wird immer nch nicht bewusst wo ein Vorteil darin liegen sollte.

www.seitenreport.de/forum/beitraege/erfahrungsaustausch_und_gegenseitige_hilfe/css_frage.html

@Joerg;
Woher willst du wissen das Sie es nicht tun?

Wenn ich das richtig verstanden habe, dient diese Erweiterung dazu css zu generieren. Also aus sass/scss wird css.

Die Syntax der Nested Rules gefällt mir ehrlich gesagt recht gut. Und praktisch wäre das auch. Aber eine extra Extension zu installieren um das zu nutzen werde ich nicht.
[css]table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}[/css]

Vielleicht wird es ja irgend wann mal in den CSS Standard übernommen?

Gruß Thomas

Die Extension ist AFAIK nur eine Portierung der Ruby-Version von SASS.
Wer also Ruby zur Verfügung hat, kann es auch bequemer haben: http://sass-lang.com/tutorial.html

Ich nutze das SASS ähnliche LESS schon eine ganze Weile, eine echt nette Sache, erspart in jedem Fall viel arbeit. Richtig interessant wird es allerdings erst im Zusammenspiel mit ant und ähnlichen build-tools. Man lässt ant einmal durchlaufen und schon sind alle less-Dateien zu css-Dateien übersetzt und auch direkt minimiert. Super Sache!

@jörg: Er ist kürzer und enthält jede Menge Vorteile. Als Endbenutzer bekommst du davon natürlich nichts zu sehen, da die Dateien serverseitig nach css kompiliert werden. Ein paar Beispiele aus LESS:

[css]
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

.bordered {
border-top: dotted 1px @light-blue;
border-bottom: solid 2px @light-blue;
}

#menu a {
color: @nice-blue;
.bordered;
}
.post a {
color: @light-blue;
.bordered;
}
[/css]

Wird z.B. zu Folgendem:
[css]
#menu a {
color: #5B83AD;
border-top: dotted 1px #6c94be;
border-bottom: solid 2px #6c94be;
}
.post a {
color: #6c94be;
border-top: dotted 1px #6c94be;
border-bottom: solid 2px #6c94be;
}
[/css]

Sich öfter wiederholende Dinge kann man also z.B. einmal definieren und dann immer wiederverwenden. Ich weiß gar nicht, wie oft ich früher mit Suchen-Ersetzen durch meine CSS-Dateien gegangen bin, weil ich eine Farbe um eine Stufe heller machen wollte. Mit LESS reicht es, eine Variable zu ändern.
Es geht also, wie so oft, vor allem um Wartbarkeit und Wiederverwendbarkeit.

@UFOMelkor: Danke!

Google hat mit den Closure Stylesheets vor kurzem ebenfalls eine Technik vorgestellt, die (u.a.) die Verwendung von Variablen in CSS-Dateien erlaubt: www.golem.de/1111/87837.html

Die Jungs von Mayflower haben heute noch einen Artikel dazu veröffentlicht:
10 good reasons why to learn a css meta language like sass or less