Skip to content

Instantly share code, notes, and snippets.

@finteractive
Created March 6, 2015 22:25
Show Gist options
  • Save finteractive/9a7d1d33b263073a16c3 to your computer and use it in GitHub Desktop.
Save finteractive/9a7d1d33b263073a16c3 to your computer and use it in GitHub Desktop.
// ----
// 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);
}
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