Created
March 6, 2015 22:25
-
-
Save finteractive/9a7d1d33b263073a16c3 to your computer and use it in GitHub Desktop.
REM / PX mixin http://sassmeister.com/gist/9a7d1d33b263073a16c3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.12) | |
// Compass (v1.0.3) | |
// ---- | |
// Modified without base 10 reset | |
// From https://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ | |
@function strip-unit($num) { | |
@return $num / ($num * 0 + 1); | |
} | |
$base-font-size: 16px !default; | |
// Supply px value for fonts | |
@mixin font-size($sizeValue) { | |
font-size: $sizeValue + px; | |
font-size: ($sizeValue / strip-unit($base-font-size)) + rem; | |
} | |
// Example in use | |
h1 { | |
@include font-size(90); | |
} | |
@mixin rem-fallback($property, $values...) { | |
$max: length($values); | |
$pxValues: ''; | |
$remValues: ''; | |
@for $i from 1 through $max { | |
$value: strip-unit(nth($values, $i)); | |
$pxValues: #{$pxValues + $value*16}px; | |
@if $i < $max { | |
$pxValues: #{$pxValues + " "}; | |
} | |
} | |
@for $i from 1 through $max { | |
$value: strip-unit(nth($values, $i)); | |
$remValues: #{$remValues + $value}rem; | |
@if $i < $max { | |
$remValues: #{$remValues + " "}; | |
} | |
} | |
#{$property}: $pxValues; | |
#{$property}: $remValues; | |
} | |
// Example in use | |
h2 { | |
@include rem-fallback(margin, 15, 20); | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h1 { | |
font-size: 90px; | |
font-size: 5.625rem; | |
} | |
h2 { | |
margin: 240px 320px; | |
margin: 15rem 20rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment