{"id":297,"date":"2013-05-26T22:49:53","date_gmt":"2013-05-26T20:49:53","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=297"},"modified":"2013-05-27T17:34:26","modified_gmt":"2013-05-27T15:34:26","slug":"sass-mixin-rem-mit-px-fallback","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","title":{"rendered":"Sass-Mixin: rem mit px-Fallback"},"content":{"rendered":"<p>Ich nutze im Css so gut wie ausschlie\u00dflich <code>rem<\/code> (siehe dazu auch <a href=\"http:\/\/www.elmastudio.de\/programmierung\/css\/css-tipp-rem-als-einheit-fur-schriftgrose-nutzen\/\">CSS-Tipp: rem als Einheit f\u00fcr Schriftgr\u00f6\u00dfe nutzen<\/a>) 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 <a href=\"https:\/\/github.com\/drublic\/Sass-Mixins\/blob\/master\/partials\/_rem.scss\">rem-Mixin f\u00fcr Sass<\/a> von <a href=\"http:\/\/drublic.de\/\">Hans Christian Reinl<\/a> fand. Dieses Mixin berechnet aus einem angegebenen <code>rem<\/code>-Wert das Pixel-Fallback und f\u00fcgt es ins Stylesheet ein. Das ist prinzipiell eine tolle Sache, half mir aber noch nicht vollst\u00e4ndig weiter, da ich sehr oft Pixel als Einheit genannt bekomme. Daher habe ich das Mixin so modifiziert, dass es Pixelwerte annimmt und in <code>rem<\/code> umrechnet:<\/p>\n<pre><code>@mixin px-rem($property, $values, $main-font-size: 16) {\r\n\t\/\/ Empty list for all values in px\r\n\t$px-values: ();\r\n\t$rem-values: ();\r\n\r\n\t\/\/ Iterate over entries\r\n\t@each $value in $values {\r\n\r\n\t\t\/\/ If the value is zero, return 0\r\n\t\t@if $value == 0 or type_of($value) != number {\r\n\t\t\t$px-values: append($px-values, $value);\r\n\t\t\t$rem-values: append($rem-values, $value);\r\n\r\n\t\t\/\/ If the value is not zero, convert it from px to rem\r\n\t\t} @else {\r\n\t\t\t$px-values: append($px-values,#{$value}px);\r\n\t\t\t$rem-values: append($rem-values,($value\/$main-font-size)+rem);\r\n\t\t}\r\n\t}\r\n\r\n\t\/\/ Return the property and its list of converted values\r\n\t#{$property}: #{$px-values};\r\n\t#{$property}: #{$rem-values};\r\n}<\/code><\/pre>\n<p>Aufgerufen wird das Mixin wie folgt:<\/p>\n<pre><code>.selector {\r\n    @include px-rem(font-size, 20);\r\n}<\/code><\/pre>\n<p>Das Ergebnis sieht so aus:<\/p>\n<pre><code>.selector {\r\n    font-size: 20px;\r\n    font-size: 1.25rem;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 Christian Reinl fand. Dieses Mixin [&hellip;]<\/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":"","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":[77],"tags":[96,98,97,95],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-4N","jetpack-related-posts":[{"id":644,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/06\/06\/compass-mehrere-css-transformationen-verknuepfen\/","url_meta":{"origin":297,"position":0},"title":"Compass: Mehrere Css-Transformationen verkn\u00fcpfen","author":"Paul-Christian Abla\u00df","date":"6. Juni 2014","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;Tools&quot;","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":297,"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 &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":425,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/09\/24\/sass-compass-encoding-auf-utf-8-umstellen\/","url_meta":{"origin":297,"position":2},"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 &quot;Tools&quot;","block_context":{"text":"Tools","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/tools\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/07\/18\/initial-werte-fuer-css-eigenschaften\/","url_meta":{"origin":297,"position":3},"title":"Initial-Werte f\u00fcr Css-Eigenschaften","author":"Paul-Christian Abla\u00df","date":"18. Juli 2013","format":false,"excerpt":"Gelegentlich passiert es, dass mir nicht sofort der Initial-Wert f\u00fcr bestimmte Css-Eigenschaften einf\u00e4llt. Um in solchen Momenten nicht wild zu raten oder aber versehentlich einen falschen Wert aufzuschreiben (wieso das keine gute Idee ist, schreibt Divya Manian in Safe CSS Defaults), empfiehlt sich ein Blick in diese Liste von Initial-Werten\u2026","rel":"","context":"In &quot;Css&quot;","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":297,"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 &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":166,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/17\/uebersicht-ueber-verschiedene-fachbegriffe-aus-dem-bereich-retina-display-optimierung\/","url_meta":{"origin":297,"position":5},"title":"\u00dcbersicht \u00fcber verschiedene Fachbegriffe aus dem Bereich Retina-Display-Optimierung","author":"Paul-Christian Abla\u00df","date":"17. M\u00e4rz 2013","format":false,"excerpt":"Hier eine kurze \u00dcbersicht \u00fcber die verschiedenen Fachbegriffe, ihre deutsche \u00dcbersetzung (so vorhanden) sowie eine kurze Erkl\u00e4rung. Englisch Deutsch Erkl\u00e4rung device pixels\/ physcial pixels\/ hardware pixels Ger\u00e4tepixel\/ physikalische Pixel Kleinste Darstellungseinheit auf dem Screen des Endger\u00e4tes und somit die Art von Pixel, die gemeint ist wenn es um die Aufl\u00f6sung\u2026","rel":"","context":"In &quot;Css&quot;","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\/297"}],"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=297"}],"version-history":[{"count":5,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"predecessor-version":[{"id":302,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/297\/revisions\/302"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}