In den letzten Monaten habe ich in einem größeren Projekt gearbeitet, in dem wir leider keinen Präprozessor einsetzten. Ich habe so ein halbes Jahr lang studieren können, welchen Spass die Arbeit mit einem Präprozessor machen könnte, wie effektiv man damit arbeiten könnte. Nun versuche ich gerade meine gesammelten Ideen zur Effektivierung mittels Sass in die Tat umzusetzen.
Eine Arbeit, die mir Sass (nur mit diesem Präprozessor kenne ich mich aus) abnehmen soll, ist die Verteilung von IE-spezifischem CSS. Transparenz mittels rgba, Boxschatten und ähnliche CSS3-Eigenschaften kann man mittels alter IE-Filter nachahmen. Doch möchte ich den dafür notwendigen Code in spezielle CSS-Dateien für IE 8 und älter (oldIE) ausgelagert wissen. Leider bietet mir Sass so etwas nicht direkt an. Wenn man aber sein Projekt passend aufbaut, dann klappt das auch mit dem alten IE.
Eine Frage des Aufbaus
Die Lösung des Problems liegt im Aufbau meines Projektes. Ich mache mir den @import
-Befehl zu nutze. Entscheidend ist aber die Variable zu Beginn des Files. Sie definiert, ob das Stylesheet Code für oldIE ausgeben soll oder nicht.
Ich importiere dann zwei Arten von mixins, die für alle gültigen und diejenigen, die Code für „Legacy-Browser“, also die alten IE beinhalten. Danach importiere ich alle einzelnen Codeschnipsel für meine Module.
Das Stylesheet für die alten IE ist im Normalfall als Ergänzung zu dem anderen Stylesheet zu sehen. Im Normalfall deshalb, weil ich auch bei intensiver Arbeit mit Mediaqueries eine komplette Alternativversion für oldIE schaffen könnte – aber das ist ein anderes Thema.
Als Ergänzung zum allgemeinen Stylesheet füge ich also nun eines für die alten IE-Versionen hinzu. Es hat beispielsweise folgenden Aufbau:
Die wichtige Variable ist diesmal auf true
gesetzt. Bei den importierten Partials könnte man nun entscheiden, welche Regeln für den IE eingefügt werden sollen und welche nicht. Denn eine unnötige Dopplung gilt es zu vermeiden.
Abfrage in den Mixins
Nachdem nun die wichtige Variable $isoldIE
eingeführt wurde, nutze ich sie in einigen Mixins. Mittels @if .... @else
lasse ich die Mixins unterschiedlichen Code ausgeben.
Die unterschiedlichen Ausgaben kann man schnell und einfach mittels Sassmeister ausprobieren. [Es gibt übrigens auch ein Bookmarklet für Sassmeister, das man auf Gist-Seiten aktiviert und dann mitsamt dem Gist zu Sassmeister gelangt.]