Skip to content

Instantly share code, notes, and snippets.

@SidIcarus
Created March 29, 2015 20:09
Show Gist options
  • Save SidIcarus/3f697c11227ba403ad52 to your computer and use it in GitHub Desktop.
Save SidIcarus/3f697c11227ba403ad52 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$td-font-size-base: 16;
@function contains($list, $value) { @return if(index($list, $value), true, false); }
@function strip-unit($num) { @return $num / ($num * 0 + 1); }
@function is-unit-type($a, $unit) {
$valid-units: 'deg', 'grad', 'turn', 'rad', 'px', 'em', 'rem', 'vh', 'vw',
'vm', 'vmin', 'vmax', 'ex', 'ch';
$validate-unit: contains($valid-units, $unit);
@if $validate-unit { @return if(unit($a) == $unit, true, false); }
@else { @error '#{valid} is not a valid unit.'; }
}
@function convert-unit($value, $unit) {
$units: ('px': 0px,
'cm': 0cm,
'mm': 0mm,
'%': 0%,
'ch': 0ch,
'in': 0in,
'em': 0em,
'rem': 0rem,
'pt': 0pt,
'pc': 0pc,
'ex': 0ex,
'vw': 0vw,
'vh': 0vh,
'vmin': 0vmin,
'vmax': 0vmax,
'deg': 0deg,
'turn': 0turn,
'rad': 0rad,
'grad': 0grad,
's': 0s,
'ms': 0ms,
'Hz': 0Hz,
'kHz': 0kHz,
'dppx': 0dppx,
'dpcm': 0dpcm, 'dpi': 0dpi,
);
@if map-has-key($units, $unit) { @return map-get($units, $unit) + $value; }
@error 'Unknown unit `#{$unit}`.';
}
@function calc-rEm-from-px($px, $unit: 'rem', $return-px: false, $context: $td-font-size-base) {
$valid-size-units: 'rem', 'em';
$is-valid-unit: contains($valid-size-units, $unit);
$px-unitless: strip-unit($px);
$context-unitless: strip-unit($context);
@if (not is-unit-type($px, 'px')) { $px: convert-unit($px, px); }
@if $is-valid-unit {
$return: convert-unit(($px-unitless / $context-unitless), $unit);
@if ($return-px) { @return join($return, $px); }
@else { @return $return; }
} @else { @error 'Cannot convert #{$px} to #{$unit}'; }
}
@mixin r-em-px($property, $unit, $pxs.../*, $context*/) {
$px-values: ();
$r-em-values: ();
$pxs-count: length($pxs);
$sole-px: $pxs-count == 1;
$last: nth($pxs, -1);
$context: if($sole-px, $td-font-size-base, $last);
@if(not $sole-px) { $pxs-count: $pxs-count - 1; }
@for $i from 1 through $pxs-count {
$px: nth($pxs, $i);
$rEM-then-px: calc-rEm-from-px($px, $unit, true, $context);
$pxVal: nth($rEM-then-px, 2);
$rmVal: nth($rEM-then-px, 1);
@if $pxs-count > 1 {
$pxVal: $pxVal + ' ';
$rmVal: $rmVal + ' ';
}
$px-values: append($px-values, $pxVal); // px
$r-em-values: append($r-em-values, $rmVal); // rem or em
}
#{$property}: $px-values;
#{$property}: $r-em-values;
}
p { @include r-em-px(margin, em, 4px, 14px); }
p { @include r-em-px(top, rem, 4); }
p {
margin: 4px;
margin: 0.28571em;
}
p {
top: 4px;
top: 0.25rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment