panicbus
10/20/2016 - 6:36 PM

Calculate REM size with Sass

Calculate REM size with Sass

// Take a px and convert to rem
@function calculateRem($values) {

	@if $supports-rem {
		$max: length($values);

		@if $max == 1 { @return convert-to-rem(nth($values, 1)); }

		$remValues: ();
		@for $i from 1 through $max {
			$remValues: append($remValues, convert-to-rem(nth($values, $i)));
		}
		@return $remValues;
	}
	@else {
		@return $values; //just use value we were provided
	}

}
@function convert-to-rem($size)  {
	$remSize: $size / $rem-base;
	@return $remSize * 1rem;
}

@mixin font-size($size) {
	font-size: calculateRem($size);
}

@mixin rem-size($attribute, $sizes) {
	#{$attribute}: calculateRem($sizes);
}