SASS / SCSS
Redaktionelle Einordnung
Diese archivierte Diskussion behandelt SASS / SCSS aus Sicht der Rubrik HTML5 & CSS.
Die Diskussion bleibt als Archiv nutzbar. Für die aktuelle Bewertung empfehlen sich ergänzend neuere Artikel, Tools oder eine konkrete Analyse.
Sinnvoll nutzbar bleibt der Thread vor allem als historischer Kontext, für typische Fragestellungen und zur Einordnung älterer Empfehlungen.
Einige im historischen Thread genannte Tools, Dienste oder externe Links könnten heute nicht mehr verfügbar oder inhaltlich überholt sein. Nutzen Sie sie bitte nur mit zusätzlicher Prüfung.
Startbeitrag
Archivierter Thread aus dem Seitenreport-Forum.
Hallo,
hinter dem 3. Türchen des TYPO3-Adventskalender verbarg sich der Hinweis auf eine Extension, die SASS, bzw. SCSS integriert.
SASS ist eine Meta Sprache, die Nested Rules, Variable und einiges mehr für CSS zur Verfügung stellt. Die SASS-Homepage findet ihr unter sass-lang.com
Mich reizt die Möglichkeit, eine bessere Struktur in mein CSS zu bekommen. Wer von euch hat Erfahrung mit dieser interessanten Erweiterung?
Grüße
Lutz
Antworten
5 BeiträgeHallo 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
Eine bessere Struktur meiner CSS Datei habe ich dadurch erreicht das ich die neuen Elemente in HTML5 auch einsetze. Dadurch vermeide ich halt eben das ich unnötige class und id Attribute einsetze.
Die Syntax von diesem SASS oder SCSS ist weder kürzer oder enthält einen anderen Vorteil wenn ich das richtig verstehe.
Auch kenne ich bisher keine Webseite im Live Betrieb die das verwendet.
Wenn das wirklich so gut wäre sollte die Seite die das propagiert meiner Ansicht nach es zumindest einsetzen. Es handelt sich aber um ganz normales CSS.
Sorry aber wenn ich von was überzeugt bin dann zeige ich sowas auch im Live Betrieb.
Und ich bin beispielsweise von XHTML5 und kleinere CSS Anweisungen durch eine Dataurl anzugeben überzeugt.
Gruß
Jörg
@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
Ich nutze CSS-Variablen ebenfalls gerne, da sie den Wartungsaufwand z.B. beim ndern von Farben in CSS-Dateien erheblich reduzieren.
Matthias
SEO Analyse und Website-Check mit Seitenreport
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