Compass bietet out of the box eine ganze Reihe von Mixins zur einfachen Nutzung von verschiedenen Css-Transformationen an. Leider gibt es bei der Bündelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgründen festhalten möchte.
Die transform()-Mixins von Compass
Es gibt prinzipiell drei Compass-Mixins die zum Erstellen von mehreren verknüpften Transformationen in Frage kommen:
Allerdings wird in der transform-Dokumentation von der Nutzung von create-transform()
abgeraten:
Full transform mixins For settings any combination of transforms as arguments These are complex and not highly recommended for daily use. They are mainly here for backward-compatibility purposes.
Bleiben also lediglich transform()
und simple-transform()
.
Compass oder Grunt-Compass?
Grundsätzlich muss unterschieden werden zwischen einem standalone laufenden Compass und dem Grunt-Task grunt-contrib-compass: Was nämlich beim standalone laufenden Compass funktioniert, muss nicht zwangsläufig beim Grunt-Compass-Task funktionieren…
Grunt
simple-transform()
Beim Aufruf von simple-transform()
wird folgende Fehlermeldung ausgegeben:
(Line 565 of _transform.scss: Mixin transform-origin takes 1 argument but 4 were passed.)
Somit ist dieses Mixin nicht benutzbar.
Vielleicht habe ich auch etwas falsch gemacht. Falls ja, bin ich für Hinweise äußerst dankbar.
transform()
Für das transform()-Mixin schlägt die Dokumenation (dem Link folgen und nach @include transform
suchen) folgende Notation vor:
@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);
Das funktioniert nicht und wird mit der Fehlermeldung „Mixin transform-origin takes 1 argument but 2 were passed.“ quittiert. Beim Suchen nach diesem Fehler stößt man recht schnell auf die Lösung: Einfach das Komma im transform-origin
-Mixin weglassen. Somit ergibt sich folgende, tatsächlich funktionierende Notation:
@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100% 0%);
Äußerst wichtig: Im Gegensatz zu den beiden anderen vorgestellten Mixins kann background-origin
nicht innerhalb des Mixins angegeben werden, sondern muss in einem separaten transform-origin
-Mixin angegeben werden. Alles andere wäre auch zu einfach.
Standalone Compass
Benutzt man Compass ohne Grunt, sieht die Sache etwas anders aus: Dort funktioniert das simple-transform
-Mixin. Zumindest so einigermaßen.
simple-transform()
@include simple-transform(1.5, 45deg, 1em, 2em, 5deg, -5deg, 100%, 0%);
Einigermaßen deshalb, weil das Weglassen von Werten mittendrin mit Fehlermeldungen und Nicht-Funktionieren bestraft wird. Wenn man also nicht jedes Mal alle Werte aufschreiben möchte, ist dieses Mixin doch eher ungeeignet (Fun Fact: simple-transform
ist eigentlich genau das selbe wie create-transform
, nur werden bereits im Voraus bestimmte Parameter exkludiert. Daher eignet es sich also nicht, wenn man beispielsweise die Perspektiv-Eigenschaft nutzen möchte. Facepalm-Smiley. Fröhlicher Smiley.).
transform()
Auch bei einer Standalone-Nutzung von Compass funktioniert das transform-Mixin. Hier muss allerdings das Komma im transform-origin-Mixin gesetzt werden. Mit anderen Worten: Es funktioniert tatsächlich genau so wie in der Dokumentation angegeben.
@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);
Ist doch alles ganz einfach, oder?
tl;dr
Mit Grunt
@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100% 0%);
Standalone Compass
@include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));
@include transform-origin(100%, 0%);
Versionshinweis
Gestestet wurde mit Sass 3.3.5 und Compass 1.0.0.alpha.19.
Kommentar verfassen