Akzeptieren

Diese Website verwendet Cookies. Durch die Nutzung dieser Webseite erklären Sie sich damit einverstanden, dass Cookies gesetzt werden. Mehr erfahren

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

SASS / SCSS

Verfasst am: 03. 12. 2011 [22:59]
lwulfe
813 Beiträge
Consultant
Dabei seit: 02.10.2009

✓ Seitenreport Vorantreiber
Themenersteller

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

Verfasst am: 03. 12. 2011 [23:17]
joerg
1984 Beiträge
Fachinformatiker Anwendungsentwicklung
Dabei seit: 09.06.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

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



Verfasst am: 04. 12. 2011 [01:46]
Ultima
867 Beiträge
Fachinformatiker / Anwendungsentwicklung
Dabei seit: 09.07.2010

✓ Seitenreport Vorantreiber

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


Verfasst am: 04. 12. 2011 [15:48]
UFOMelkor
353 Beiträge
Student
Dabei seit: 20.10.2009

☆ Content Bringer

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.



Verfasst am: 05. 12. 2011 [11:59]
seitenreport
1934 Beiträge
Seitenreport Inhaber
TYPO3 Senior Developer
Dabei seit: 28.03.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

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

Matthias Gläßner.
Certified TYPO3 Developer
TYPO3 Senior Entwickler
Inhaber von Seitenreport, der SEO und Website Analyse


Verfasst am: 09. 12. 2011 [14:59]
UFOMelkor
353 Beiträge
Student
Dabei seit: 20.10.2009

☆ Content Bringer

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






to Top to Top

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:

RSS Feed abonnieren


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

Administratoren und Moderatoren:
[keine]

Seitenreport hat 47724 registrierte Mitglieder, 4358 Themen und 37794 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 0 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 0 neue Themen und 0 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

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

Seitenreport API

Verfolge die SERP Positionen Deiner Keywords und erhalte Informationen über verwendete Mikroformate, frage die Ergebnisse unserer Analysen live ab oder greife auf unsere History-Datenbank zu. Dies alles bietet Dir die neue Seitenreport API. Kontaktiere uns, um weitere Infos zu erhalten.