SASS plugin für die Nutzung von rem
Wer schon einmal an einem barrierearmen Projekt gearbeitet hat, kennt das Problem. Man darf als Masseinheit keine Pixel nutzen, sondern muss mit relativen Einheiten arbeiten. Lange Zeit habe ich em genutzt. Das funktioniert so weit ganz gut, treibt einen aber bei Verschachtelungen fast in den Wahnsinn:
16px = 1em
12px = 0.75em
14px = 1.167em
10px = 0.714em
Nun gibt es die schöne Masseinheit rem, wo sich die aktuelle Einheit auf das allererste Root-Element bezieht. Das ist deutlich weniger Rechenarbeit. Dummerweise wird rem nicht vom Internet Explorer von allen Browsern unterstützt. Um den IE diese Browser trotzdem zu berücksichtigen, sollte man ein Fallback mit Pixeln in Betracht ziehen.
element{
margin: 20px;
margin: 2rem;
}
Da ich fast nur noch mit SASS arbeite, war ich auf der Suche nach einem Mixin, welches mir die doppelte Schreibarbeit abnimmt. Ich wurde wie so oft auf GitHub fündig. Dort hat Ray Brown aka bitmanic ein kleines Mixin für die automatische Umrechnung hinterlegt. Ich habe das Mixin erweitert, damit auch Strings und Farben akzeptiert werden. Die Funktionsweise ist einfach:
.element
@include rem('padding',10px 0 2px 5px)
.element2
@include rem('border', 1px solid red)
@include rem('padding', 10px !important)
Der Output
.element {
padding: 10px 0 2px 5px;
padding: 1rem 0 0.2rem 0.5rem;
}
.element2 {
border: 1px solid red;
border: 0.1rem solid red;
padding: 10px !important;
padding: 1rem !important;
}
Beim .element2 sieht man meine Neuerung: Man kann auch nicht-numerische Werte durchschleusen und dadurch mit allen CSS-Elementen arbeiten.
Ich wünsche produktives Arbeiten:)
Weitere Informationen:
