Css Stylesheet mit Variablen?

[ragukro]

Hallo miteinander!

In dem Versuch code und Style zu trennen verwende ich css Stylesheets. In diesen schaffe ich es nicht eine Farbe als Variable zu definieren

$meineFarbe1: #F30100

um sie dann einige Zeilen später ( noch immer im Stylesheet ) zu verwenden,

color:$meineFarbe1

Was läuft da schief?

 

[MrMurphy]

Hallo,

CSS kennt keine Variablen.

Wenn du mit Variablen arbeiten möchtest solltest du dich mit SCSS (bzw. SASS) und LESS beschäftigen.

Gruss

MrMurphy

 

[ragukro]

Vielen Dank für die Antwort - wie schade.

Ich habe im Moment noch genug damit zu tun html, javascript, PHP, css und nun noch Ajax zu bändigen.

Irgendwie habe ich die Antwort erwartet, beim googlen kam nix gescheites heraus.

 

[webana]

Vielen Dank für die Antwort - wie schade.

Ich habe im Moment noch genug damit zu tun html, javascript, PHP, css und nun noch Ajax zu bändigen.

Irgendwie habe ich die Antwort erwartet, beim googlen kam nix gescheites heraus.

Vielleicht so: http://www.webmasterpro.de/coding/article/php-in-css-dss-dynamic-style-sheet.html sehr sehr einfach gehalten ...

 

[ragukro]

Whow!
php in einer CSS Datei - einfach und genial.

Vielen Dank, so etwas habe ich gesucht.

 

[Tronjer]

PHP in einer CSS Datei ist einfach Blödsinn. Nur weil etwas funktioniert, muss es noch lange nicht gut sein.

Für so etwas gibt es Stylesheet Sprachen und Frameworks, die nebenbei noch wesentlich mehr Funktionen mitbringen.
http://compass-style.org/

Falls dir Sass/Compass (noch) zu kompliziert erscheinen sollte, schreibe weiter normales CSS. Aber gewöhne dir die Ghetto-Lösung mit PHP-Variablen in Stylesheets gar nicht erst an.

 

[djheke]

So ein Aufwand wegen einer Variable!

 

[Tronjer]

Nicht alles lässt sich mit einer einfachen Variablen erledigen. Was wäre, wenn sie einen CSS3 Gradienten crossbrowser-kompatibel speichern soll? Sass kennt auch abstrakte Klassen (Placeholder) und Vererbungen.

Beispiel:

%gradient-red {
  background-color: #fb0000; // Old browsers
  @include filter-gradient(#fb0000, #a30000, vertical); // IE6-8
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(top,  #fb0000 0%,#e80000 24%,#ca0000 34%,#aa0000 61%,#a30000 71%,#a30000 100%));
}

.meine-css-klasse {
   @extend %gradient-red;
}

 

[ragukro]

... Eine für mich interessante Diskussion.

Ich hatte bei mir gedacht, dass irgendwann html5 final fertig wird und auf breiter Front kommt und möglicherweise das Thema Styledefinitionen / CSS komplett anders angegangen wird. Daher wollte ich nicht mehr zuviel Energie in die CSS Erweiterungen aufwenden. Möglicherweise habe ich da aber zu hohe Erwartungen an html5?

Eigentlich wollte ich mit diesem Diskussions-Thema ja nur meine CSS Datei übersichtlicher machen und beispielsweise Farbdefinitionen zentral einmal festlegen. Änderungen des Farbkonzeptes wären so viel einfacher und fehlerfreier zu lösen.

Verstanden habe ich nicht, was denn gegen php in CSS genau spricht?

 

[djheke]

HTML5 und CSS3 sind zwei verschiedene Paar Schuhe.
Wenn du Farben ändern möchtest, geht es am einfachsten mit SUCHEN UND ERSETZEN.

 

[Tronjer]

Da bist du auf dem falschen Dampfer. HTML5 und CSS sind völlig unterschiedliche Baustellen. Ebenso wie Less oder Stylus ist Sass eine Art Metasprache, die auf CSS aufbaut und es um zusätzliche Funktionen erweitert. Nichtsdestotrotz kann man in .scss Dateien die selben Attribute wie in .css Dateien verwenden und muss keine neue Sprache oder Syntax erlernen.

Der Grundgedanke ist ein kaskadierender Aufbau des Stylings durch wartbare und übersichtliche Module. Eine kleine Webseite kommt vielleicht noch mit wenigen hundert Zeilen CSS aus, aber wenn im Laufe der Zeit neue Unterseiten hinzukommen, gelangt man schnell bei mehreren tausend an und spätestens wenn die Webseite durch ein neues Design visuell aufgehübscht werden soll, hat man völlig den Überblick verloren. Beim Verändern des alten Codes ergibt sich immer die Gefahr, etwas zu zerschießen. Also überschreibt man ständig alten Selektoren durch neue tiefer differenzierte. Da helfen auch keine PHP Variablen mehr.

Sinnvoller Weise legt man deshalb eine modulare Struktur an und zerlegt sein Stylesheet entsprechend.

Beispiel für einen vereinfachten Aufbau:

// styles.scss
@import "variables";
@import "base_layout";
@import "navbar";
@import "index";
@import "kontakseite";

Dabei werden die Dateien _variables.scss, _base_layout.scss, etc., alle in die Datei styles.scss importiert. Sass kompiliert die styles.scss dann zur styles.css, so dass man auf seiner Seite lediglich ein einziges Stylesheet verlinken muss.

 

[scbawik]

... Eine für mich interessante Diskussion.

Ich hatte bei mir gedacht, dass irgendwann html5 final fertig wird und auf breiter Front kommt und möglicherweise das Thema Styledefinitionen / CSS komplett anders angegangen wird. Daher wollte ich nicht mehr zuviel Energie in die CSS Erweiterungen aufwenden. Möglicherweise habe ich da aber zu hohe Erwartungen an html5?

Eigentlich wollte ich mit diesem Diskussions-Thema ja nur meine CSS Datei übersichtlicher machen und beispielsweise Farbdefinitionen zentral einmal festlegen. Änderungen des Farbkonzeptes wären so viel einfacher und fehlerfreier zu lösen.

Verstanden habe ich nicht, was denn gegen php in CSS genau spricht?

Gegen PHP spricht dass das CSS für jeden Besucher neu generiert werden muss. Bei CSS Preprozessoren wird dies hingegen nur während der Entwicklung generiert und anschließend als statische CSS Datei abgelegt.
Reines CSS ist natürlich ein bisschen schneller als ein PHP Skript.

Mit entsprechendem Caching könnte man das zwar umgehen, ist dann aber wesentlich aufwändiger umzusetzen als wenn man sich einfach mit SASS beschäftigt (LESS mag ich nicht).

Allerdings habe ich auch schon per PHP CSS-Files generiert - zu Zeiten in denen SASS mir (und vielen anderen) noch unbekannt war.
Ich persönlich finde das nicht verwerflich, da es einwandfrei funktioniert und sich bis auf die Endung .php zu CSS nicht unterscheidet.
Heute würde ich das aber nicht mehr machen.

In nächster Zeit (Minimum die nächsten 5 Jahre) solltest du dir nicht viel mehr von HTML und CSS erwarten als bisher möglich ist.
Auch wenn CSS einmal Variablen haben sollte, wird es nie so umfangreich wie SASS sein.

Erstmal mit SASS angefangen wirst du nie mehr mit reinem CSS arbeiten wollen.