Du bist hier: Seitenreport    Forum    Web-Entwicklung    (X)HTML & CSS    SASS / SCSS

SASS / SCSS

Verfasst am: 03. 12. 2011 [22:59]
lwulfe
Dabei seit: 02.10.2009
Themenersteller

807 Beiträge
Beitrag hilfreich?

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 http://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
Coaching-Kompass - die intuitive Coach-Suche
Meine Seite
Profil
WWW
 
Verfasst am: 03. 12. 2011 [23:17]
joerg
Dabei seit: 09.06.2009

1540 Beiträge
Beitrag hilfreich?

Hallo Lutz

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

http://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
Profil
WWW
 
Verfasst am: 04. 12. 2011 [01:46]
Ultima
Dabei seit: 09.07.2010

759 Beiträge
Beitrag hilfreich?

@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;
  }
}


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

Gruß Thomas
Mein Portal: Ultima-Project.net - Gold für alle
Profil
WWW
 
Verfasst am: 04. 12. 2011 [15:48]
UFOMelkor
Dabei seit: 20.10.2009

348 Beiträge
Beitrag hilfreich?

Die Extension ist AFAIK nur eine Portierung der Ruby-Version von SASS.
Wer also Ruby zur Verfügung hat, kann es auch bequemer haben: 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;
}


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;
}


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
Profil
WWW
 
Verfasst am: 05. 12. 2011 [11:59]
seitenreport
Dabei seit: 28.03.2009

Matthias Gläßner
Premium-Mitglied

1792 Beiträge
Beitrag hilfreich?

@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: http://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
TYPO3 Freelancer | Gründer und Betreiber von Seitenreport
TYPO3 Anfragen: info@matthias-glaessner.de | XING-Profil
Profil
WWW
 
Verfasst am: 09. 12. 2011 [14:59]
UFOMelkor
Dabei seit: 20.10.2009

348 Beiträge
Beitrag hilfreich?

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
Naturkosmetik in Bochum

Steppenhahn Ultramarathon-Community
Profil
WWW
 




Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.

RSS Feed abonnieren

Werde in Echtzeit über neue Foren-Beiträge informiert:


0 Mitglieder waren innerhalb der letzten 15 Minuten online (14 heute gesamt):
[keine]

Administratoren und Moderatoren:
[keine]

Seitenreport hat 18161 registrierte Mitglieder, 3005 Themen und 29117 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 13 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 1 neues Thema und 7 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Schnellzugriff

Hier werben
Partnerprogramm
Premium Pakete
Verlinkung freischalten
Allgemeine Geschäftsbedingungen
Kontakt aufnehmen
Impressum

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Partnerprogramm

12% Lifetime Provision auf alle Buchungen von Dir geworbener Mitglieder sowie 0,50 € für jede Registrierung. Eines der besten deutschen Partnerprogramme laut den appCharts von 100partnerprogramme.de. Nimm jetzt teil am Seitenreport Partnerprogramm und verdiene gutes Geld dabei!

* = Partnerlinks