Skip to content

Instantly share code, notes, and snippets.

@jakob-e
Created August 28, 2014 05:52
Show Gist options
  • Save jakob-e/5bb283a8adda8fb9f466 to your computer and use it in GitHub Desktop.
Save jakob-e/5bb283a8adda8fb9f466 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----
$base-font-scale:100% !default;
// $base-ex-scale:2.222222;
@function absolute-px($val){ @return if(unitless($val), $val, number(px($val)) * 6.25/num($base-font-scale) );}
@function relative-px($val){ @return number($val) / 6.25*number($base-font-scale); }
// Number
@function isNaN($val) { @return type-of($val)!=number; }
@function number($val){ @return if(isNaN($val), null, if(unitless($val), $val, $val/($val*0+1))); }
@function int($val){
@if(isNaN($val)){ @return null; }
$val:number($val);
@return if($val<0,ceil($val),floor($val));
}
@function uint($val){ @return if(isNaN($val), null, abs(int($val))); }
// Aliases
@function num($val){ @return number($val); }
@function parseFloat($val) { @return number($val);} // Really a math thing
@function parseInt($val) { @return int($val); } // Really a math thing
// Lengths
// No support for ch + ex
@function px($val) { @return convert-length($val,px); }
@function pt($val) { @return convert-length($val,pt); }
@function pc($val) { @return convert-length($val,pc); }
@function in($val) { @return convert-length($val,in); }
@function mm($val) { @return convert-length($val,mm); }
@function cm($val) { @return convert-length($val,cm); }
@function rem($val){ @return convert-length($val,rem); }
@function em($val...) {
$em:convert-length(nth($val, 1), em);
@if(length($val) > 1){
@for $i from 2 through length($val){ $em:$em / number(em(nth($val,$i))); }
} @return $em;
}
@function deg($val) { @return convert-angle($val,deg); }
@function turn($val){ @return convert-angle($val,turn); }
@function grad($val){ @return convert-angle($val,grad); }
@function rad($val) { @return convert-angle($val,rad); }
// ex, ch, vw, vh, vmin, vmax
@function pct($val,$base:1){ @return if(isNaN($val), null, percentage(number(px($val))/number(px($base)))); }
// Length unit handler
@function convert-length($val, $to-unit){
$from-unit:unit($val);
@if(isNaN($val)){ @return null; }
@if($from-unit == $to-unit) { @return $val; }
// Get
$convert-unit:map-get((px:0px, pt:0pt, pc:0pc, in:0in, mm:0mm, cm:0cm, em:0em, rem:0rem, ex:0ex),$to-unit);
// Relative lengths
@if index(em rem, $to-unit) { @return $convert-unit + absolute-px($val); }
@if index(em rem, $from-unit){ @return 0px + relative-px($val); }
// Absolute lengths
@return $convert-unit + $val;
}
@function convert-angle($val, $to-unit){
$from-unit:unit($val); // same
@if($val==null or isNaN($val)){ @return null; } // same
@if($from-unit == $to-unit) { @return $val; } // same
$convert-to-unit:map-get((deg:1, turn:1/360, grad:400/300, rad:0.017453293),$to-unit); // same
$convert-from-unit:map-get((deg:1, turn:1/360, grad:400/300, rad:0.017453293),$from-unit);
@if index(deg turn grad rad, $to-unit){
$convert-from-unit:if($convert-from-unit,$convert-from-unit,1);
@return (number($val) / $convert-from-unit) * $convert-to-unit + $to-unit;
}
}
.doh{ angle:deg(.5turn); em:em(21em,32px); px:px(12pt); }
// http://www.w3.org/TR/css3-values/#lengths
/*
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2π radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
*/
@charset "UTF-8";
.doh { angle: 180deg; em: 10.5em; px: 16px; }
/*
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2π radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment