SCSS Rem Calc

@function get-rems ($nums, $delim: space) { $max: length($nums); $remValues: null; @for $i from 1 through $max { $value: nth($nums, $i); @if type-of($value) == "number" and unitless($value) { $remValues: append($remValues, #{$value / $base-px}rem, $delim); } @else { $remValues: append($remValues, $value, $delim); } } @return $remValues; } $base-px: 10; @mixin rem-calc ($property, $values...) { $max: length($values); $pxValues: null; @if $property == "font" { @for $i from 1 through $max { $value: nth($values, $i); @if type-of($value) == "number" and unitless($value) { $pxValues: append($pxValues, $value, space); } @else { $pxValues: append($pxValues, #{$value}px, space); } } #{$property}: $pxValues; } #{$property}: get-rems($values); }
Generic function to return rems when pixels are input and mixin to output rems for CSS rules.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.