Skip to content

Instantly share code, notes, and snippets.

@submjn
Last active August 1, 2023 22:16
Show Gist options
  • Save submjn/320c5c29460cb213c241 to your computer and use it in GitHub Desktop.
Save submjn/320c5c29460cb213c241 to your computer and use it in GitHub Desktop.
SCSS: Unit Conversion Utility
.classname-all {
font-size: 1rem;
padding: 1rem 0.5rem;
}
.classname-ie {
font-size: 16px;
padding: 16px 8px;
}
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
$old-ie: false!default;
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
@function convert-unit($unit, $values){
$max: length($values);
$retValues: '';
@for $i from 1 through $max {
$value: strip-unit(nth($values, $i));
@if $old-ie == true {
@if($unit == rem-px) {
$retValues: #{$retValues + $value*16}px;
} @else {
$retValues: #{$retValues + $value}px;
}
} @else {
@if($unit == px-rem) {
$retValues: #{$retValues + $value/16}rem;
} @else {
$retValues: #{$retValues + $value}rem;
}
}
@if $i < $max {
$retValues: #{$retValues + " "};
}
}
@return $retValues;
}
.classname-all {
font-size: convert-unit(px-rem, 16px);
padding: convert-unit(rem-px, (1rem, 0.5rem));
}
.classname-ie {
$old-ie: true;
font-size: convert-unit(px-rem, 16px);
padding: convert-unit(rem-px, (1rem, 0.5rem));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment