Skip to content

Instantly share code, notes, and snippets.

@ourmaninamsterdam
Last active August 29, 2015 14:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ourmaninamsterdam/0c478b85f6874902bc6e to your computer and use it in GitHub Desktop.
Save ourmaninamsterdam/0c478b85f6874902bc6e to your computer and use it in GitHub Desktop.
CSS horizontal/vertical unit parser (for horizontal/vertical rhythm)
// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// By @ourmaninamsterdam
// ----
@function px-to-rem($px){
@return ( $px / $base-font-size ) * 1rem;
}
$base-font-size: 16;
$v-unit: px-to-rem(6);
$h-unit: px-to-rem(10);
@function units($args){
@if length($args) > 4 {
@warn "Too many arguments passed";
@return null;
}
$values: ();
@for $i from 1 through length($args){
$arg: nth($args,$i) * if($i % 2 == 0, $h-unit, $v-unit);
$values: append($values, $arg);
}
@return $values;
}
@function u($args...){
@return units($args...);
}
.example {
padding: u(1);
padding: u(1 2);
padding: u(1 2 3);
padding: u(1 2 3 4);
padding: u(1) 56px u(5);
padding: 215px 100px u(5/2) 3px;
}
.example {
padding: 0.375rem;
padding: 0.375rem 1rem;
padding: 0.375rem 1rem 1.125rem;
padding: 0.375rem 1rem 1.125rem 2rem;
padding: 0.375rem 56px 1.875rem;
padding: 215px 100px 0.9375rem 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment