Google+     Twitter     Mister Wong     RSS

TYPO3 plus WEBDESIGN

< Hi, ich heiße und bin Webentwickler! Sie kennen mich vielleicht noch aus Filmen wie 'Der Ampersand der Zeit' und 'In 7 Tagen zum Traum'. Dies ist mein Webtagebuch, in dem ich zum Thema Webdesign, TYPO3 und soziale Netzwerke für Inselbegabte schreibe. />

10/18/2012 16:02:00

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: