Skip to content

Instantly share code, notes, and snippets.

@mattfelten

mattfelten/SassMeister-input.scss

Created March 27, 2014 18:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattfelten/9814368 to your computer and use it in GitHub Desktop.
Save mattfelten/9814368 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
$em-base: 16px;
@mixin rem($property, $size, $base: $em-base) {
$unitless_values: ();
@each $num in $size {
@if not unitless($num) {
@if unit($num) == "em" {
$num: $num * $base;
}
$num: strip-units($num);
}
$unitless_values: append($unitless_values, $num);
}
$size: $unitless_values;
$pixel_values: ();
$rem_values: ();
@each $value in $size {
$pixel_value: $value * 1px;
$pixel_values: append($pixel_values, $pixel_value);
$rem_value: rem($value, $base);
$rem_values: append($rem_values, $rem_value);
}
#{$property}: $pixel_values;
#{$property}: $rem_values;
}
// Convert pixels to rems
// eg. for a relational value of 12px write rem(12)
// Assumes $em-base is the font-size of <html>
@function rem($pxval, $base: $em-base) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
}
@if not unitless($base) {
$base: strip-units($base);
}
@return ($pxval / $base) * 1rem;
}
@function strip-units($val) {
@return ($val / ($val * 0 + 1));
}
body {
@include rem(font-size, 20);
}
Raw
SassMeister-output.css
body {
font-size: 20px;
font-size: 1.25rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment