{"id":644,"date":"2014-06-06T10:19:31","date_gmt":"2014-06-06T08:19:31","guid":{"rendered":"http:\/\/paulchr.ablass.me\/blog\/?p=644"},"modified":"2014-06-06T10:19:31","modified_gmt":"2014-06-06T08:19:31","slug":"compass-mehrere-css-transformationen-verknuepfen","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2014\/06\/06\/compass-mehrere-css-transformationen-verknuepfen\/","title":{"rendered":"Compass: Mehrere Css-Transformationen verkn\u00fcpfen"},"content":{"rendered":"

Compass<\/a> bietet out of the box eine ganze Reihe von Mixins zur einfachen Nutzung von verschiedenen Css-Transformationen<\/a> an. Leider gibt es bei der B\u00fcndelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgr\u00fcnden festhalten m\u00f6chte.<\/p>\n

Die transform()-Mixins von Compass<\/h3>\n

Es gibt prinzipiell drei Compass-Mixins die zum Erstellen von mehreren verkn\u00fcpften Transformationen in Frage kommen:<\/p>\n

    \n
  1. transform()<\/code><\/a><\/li>\n
  2. create-transform()<\/code><\/a><\/li>\n
  3. simple-transform()<\/code><\/a><\/li>\n<\/ol>\n

    Allerdings wird in der transform-Dokumentation von der Nutzung von create-transform()<\/code> abgeraten:<\/p>\n

    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.<\/p><\/blockquote>\n

    Bleiben also lediglich transform()<\/code> und simple-transform()<\/code>.<\/p>\n

    Compass oder Grunt-Compass?<\/h3>\n

    Grunds\u00e4tzlich muss unterschieden werden zwischen einem standalone laufenden Compass und dem Grunt-Task grunt-contrib-compass<\/a>: Was n\u00e4mlich beim standalone laufenden Compass funktioniert, muss nicht zwangsl\u00e4ufig beim Grunt-Compass-Task funktionieren…<\/p>\n

    Grunt<\/h4>\n
    simple-transform()<\/h5>\n

    Beim Aufruf von simple-transform()<\/code> wird folgende Fehlermeldung<\/a> ausgegeben:<\/p>\n

    (Line 565 of _transform.scss<\/a>: Mixin transform-origin takes 1 argument but 4 were passed.)<\/p><\/blockquote>\n

    Somit ist dieses Mixin nicht benutzbar.
    \nVielleicht habe ich auch etwas falsch gemacht. Falls ja, bin ich f\u00fcr Hinweise \u00e4u\u00dferst dankbar.<\/small><\/p>\n

    transform()<\/h5>\n

    F\u00fcr das transform()-Mixin schl\u00e4gt die Dokumenation<\/a> (dem Link folgen und nach @include transform<\/code> suchen) folgende Notation vor:<\/p>\n

    @include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));\n@include transform-origin(100%, 0%);<\/code><\/pre>\n
    Das funktioniert nicht und wird mit der Fehlermeldung „Mixin transform-origin takes 1 argument but 2 were passed.<\/strong>“ quittiert. Beim Suchen nach diesem Fehler st\u00f6\u00dft man recht schnell auf die L\u00f6sung: Einfach das Komma im transform-origin<\/code>-Mixin weglassen<\/a>. Somit ergibt sich folgende, tats\u00e4chlich funktionierende Notation:<\/p>\n
    @include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));\n@include transform-origin(100% 0%);<\/code><\/pre>\n
    \u00c4u\u00dferst wichtig:<\/strong> Im Gegensatz zu den beiden anderen vorgestellten Mixins kann background-origin<\/code> nicht innerhalb des Mixins angegeben werden, sondern muss in einem separaten transform-origin<\/code>-Mixin angegeben werden. Alles andere w\u00e4re auch zu einfach.<\/p>\n
    Standalone Compass<\/h4>\n
    Benutzt man Compass ohne Grunt, sieht die Sache etwas anders aus: Dort funktioniert das simple-transform<\/code>-Mixin. Zumindest so einigerma\u00dfen.<\/p>\n
    simple-transform()<\/h5>\n
    @include simple-transform(1.5, 45deg, 1em, 2em, 5deg, -5deg, 100%, 0%);<\/code><\/pre>\n
    Einigerma\u00dfen deshalb, weil das Weglassen von Werten mittendrin mit Fehlermeldungen und Nicht-Funktionieren bestraft wird. Wenn man also nicht jedes Mal alle Werte aufschreiben m\u00f6chte, ist dieses Mixin doch eher ungeeignet (Fun Fact<\/strong>: simple-transform<\/code> ist eigentlich genau das selbe wie create-transform<\/code>, nur werden bereits im Voraus bestimmte Parameter exkludiert. Daher eignet es sich also nicht, wenn man beispielsweise die Perspektiv-Eigenschaft nutzen m\u00f6chte. Facepalm-Smiley. Fr\u00f6hlicher Smiley.).<\/p>\n
    transform()<\/h5>\n
    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\u00e4chlich genau so wie in der Dokumentation angegeben.<\/p>\n
    @include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));\n@include transform-origin(100%, 0%);<\/code><\/pre>\n
    Ist doch alles ganz einfach, oder?<\/p>\n
    tl;dr<\/h3>\n
    Mit Grunt<\/h4>\n
    @include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));\n@include transform-origin(100% 0%);<\/code><\/pre>\n
    Standalone Compass<\/h4>\n
    @include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg));\n@include transform-origin(100%, 0%);<\/code><\/pre>\n
    Versionshinweis<\/h3>\n
    Gestestet wurde mit Sass 3.3.5 und Compass 1.0.0.alpha.19.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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\u00fcndelung dieser Transformationen in einem Mixin einige kleine Fallstricke, die ich erst nach und nach entdeckt habe und aus Archivierungsgr\u00fcnden festhalten m\u00f6chte. Die transform()-Mixins von Compass Es gibt prinzipiell drei Compass-Mixins die […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"Ich hatte Spa\u00df mit den Compass-Transformations-Mixins. Viel Spa\u00df. Unglaublich viel Spa\u00df. http:\/\/wp.me\/p2Vohc-ao","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[75],"tags":[60,174,175,176],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-ao","jetpack-related-posts":[{"id":425,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/09\/24\/sass-compass-encoding-auf-utf-8-umstellen\/","url_meta":{"origin":644,"position":0},"title":"Sass-\/ Compass-Encoding auf UTF-8 umstellen","author":"Paul-Christian Abla\u00df","date":"24. September 2013","format":false,"excerpt":"Beim erstmaligen compass compile eines neuen Projekt wurde mir heute die folgende Fehlermeldung ausgegeben: Invalid US-ASCII character \"\\xC3\" Sass und Compass bekommen ihre Encoding-Optionen von Ruby, dass sie wiederum vom Environment (sprich: Dem Server, auf dem es l\u00e4uft) \u00fcbernimmt. Um dieses Problem zu beheben, k\u00f6nnen zum einen die Locales (Spracheinstellungen)\u2026","rel":"","context":"In "Tools"","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":679,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/06\/09\/tool-sass-globbing-plugin\/","url_meta":{"origin":644,"position":1},"title":"Tool: Sass Globbing Plugin","author":"Paul-Christian Abla\u00df","date":"9. Juni 2014","format":false,"excerpt":"Mit Hilfe des Sass Globbing Plugins k\u00f6nnen viele scss-Dateien auf einmal importiert werden. Sehr hilfreich beim Import einzelner Mixin-Dateien, oder wenn es viele separate Stylesheets f\u00fcr einzelne Module gibt. Installation $ gem install sass-globbing Einbindung in config.rb require 'sass-globbing' Benutzung Um beispielsweise viele einzelne Modul-Stylesheets einzubinden: @import \"_mod*\";","rel":"","context":"In "Tools"","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":185,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/20\/compass-und-das-wordpress-eigene-style-css\/","url_meta":{"origin":644,"position":2},"title":"Compass und das WordPress-eigene style.css","author":"Paul-Christian Abla\u00df","date":"20. M\u00e4rz 2013","format":false,"excerpt":"In WordPress-Themes muss innerhalb des Theme-Root-Verzeichnis' ein Stylesheet namens style.css liegen, ansonsten wird das entsprechende Theme nicht erkannt. Dies ist innerhalb meines normalen Compass-Setups nicht ganz unproblematisch, da ich normalerweise alle Stylesheets im Ordner css\/ lagere, also auch das normale style.css. Meine bisherige L\u00f6sung sah so aus, dass ich im\u2026","rel":"","context":"In "Tools"","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":297,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","url_meta":{"origin":644,"position":3},"title":"Sass-Mixin: rem mit px-Fallback","author":"Paul-Christian Abla\u00df","date":"26. Mai 2013","format":false,"excerpt":"Ich nutze im Css so gut wie ausschlie\u00dflich rem (siehe dazu auch CSS-Tipp: rem als Einheit f\u00fcr Schriftgr\u00f6\u00dfe nutzen) als Einheit und trug das ben\u00f6tigte Pixel-Fallback bisher h\u00e4ndisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin f\u00fcr Sass von Hans\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":535,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/02\/18\/color-stops-in-verlaeufen-an-der-selben-position-bei-unterschiedlich-hohen-elementen\/","url_meta":{"origin":644,"position":4},"title":"color stops in Verl\u00e4ufen an der selben Position bei unterschiedlich hohen Elementen","author":"Paul-Christian Abla\u00df","date":"18. Februar 2014","format":false,"excerpt":"Das Problem In einem aktuellen Projekt kann auf Unterseiten einer Website ein Hintergrundverlauf zugeschaltet werden, der von transparent zu schwarz \u00fcbergeht. Das ist erst einmal kein Problem, immerhin k\u00f6nnen mittlerweile sowohl kreisf\u00f6rmige als auch lineare Verl\u00e4ufe mit Css umgesetzt werden. Der Ultimate CSS Gradient Generator ist ein wunderbares Tool zur\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":286,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/05\/img-elemente-mit-inset-box-shadow-stylen-ein-workaround\/","url_meta":{"origin":644,"position":5},"title":"img-Elemente mit inset box-shadow stylen- ein Workaround","author":"Paul-Christian Abla\u00df","date":"5. Mai 2013","format":false,"excerpt":"[Editors Note: Es gibt eine Demo box-shadow inset f\u00fcr img-Elemente] In einem Design, dass ich vor kurzem umsetzen musste, gab es jede Menge Bilder die einen nach innen liegenden Schlagschatten aufwiesen. Einfache Sache, dachte ich mir: Dem img-Element einfach einen box-shadow mit der Eigenschaft inset zuweisen\u2013 et voil\u00e0, die Sache\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/644"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":12,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":678,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/644\/revisions\/678"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}