lwulfe
Themenersteller
Consultant
Content Halbgott (743 Beiträge)
SASS / SCSS
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
joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
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
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
Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools
gelöschter Benutzer
@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
UFOMelkor
Student
Content Meister (350 Beiträge)
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.
Naturkosmetik in Bochum
Steppenhahn Ultramarathon-Community
seitenreport
Inhaber
TYPO3 Senior Developer
Content Gott (1772 Beiträge)
@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
UFOMelkor
Student
Content Meister (350 Beiträge)
Das Seitenreport Forum hat aktuell 5275 Themen und 36110 Beiträge.
Insgesamt sind 48360 Mitglieder registriert.
Beitrag erstellen
EinloggenKostenlos registrieren