Skip to content

Instantly share code, notes, and snippets.

@jakob-e
Created November 3, 2013 09:14
Show Gist options
  • Save jakob-e/7288291 to your computer and use it in GitHub Desktop.
Save jakob-e/7288291 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// ====================================================================
// Unit Conversion
// ====================================================================
//
// Functions:
// --------------------------------------------------------------------
//
// NUMBER:
//
// isNaN($value) - returns true or false if type-of($value)==number
//
// number($value) - returns a unitless number.
//
// int($value) - returns a unitless integer.
//
// uint($value) - returns a unitless unsigned integer.
//
//
// UNITS:
//
// px($value) - converts a number or unit to px.
//
// em($args...) - converts a number or unit to em.
//
// To adjust for em compounds you can add
// aditional arguments to calculate the
// visual em size. em(visual-size,....)
//
// Example: em(2, 2em, 2em) => 0.5em
//
// rem($value) - converts a number or unit to rem.
//
// pt($value) - converts a number or unit to pt.
//
// pc($value) - converts a number or unit to pc.
//
// in($value) - converts a number or unit to in.
//
// cm($value) - converts a number or unit to cm.
//
//
// PERCENTAGE:
//
// pct($value,$base:100) - similar to precentage, but takes a base
// value (100%) to be used for calculating
// the precent value returned
//
// Example: pct(1,100) => 1%
// pct(1,1) => 100%
// pct(50,250) => 20%
// pct(10px,16px) => 62.5%
// pct(1em,16px) => 100%
//
// ANGLE:
//
// deg($value) - converts a number or angle unit to deg.
//
// grad($value) - converts a number or angle unit to grad.
//
// turn($value) - converts a number or angle unit to turn.
//
// rad($value) - converts a number or angle unit to rad.
//
//
// ====================================================================
// Unit Conversion Table
// http://www.translatorscafe.com/cafe/units-converter/typography/
// 1px = 0.0625pc;
// 1px = 0.75pt;
// 1px = 0.010416667in;
// 1px = 0.264583333mm;
// 1px = 0.026458333cm;
//
// Angles
// http://www.w3.org/TR/css3-values/#angles
// Full circle = 360deg = 400grad = 1turn = 2πrad
// 1deg = 1.111111111grad (400/360)
// 1deg = 0.002777778turn (1/360)
// 1deg = 0.017453293rad (180/π)
//
// ====================================================================
// Base font scale (http://pxtoem.com/)
// - used when calculating em and rem
$base-font-scale:100% !default;
// 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
// Conversion using pixel as base
@function px($val){
@if(isNaN($val)){@return null;}
$u:unit($val);
$u:if($u==px,1,
if($u==em,0.0625 * 100/number($base-font-scale),
if($u==rem,0.0625 * 100/number($base-font-scale),
if($u==pt,0.75,
if($u==pc,0.0625,
if($u==in,0.010416667,
if($u==mm,0.264583333,
if($u==cm,0.026458333,
1))))))));
@return number($val) / $u * 1px;
}
@function em($args...){
$val:nth($args,1);
@if(isNaN($val)){@return null; }
$em:if(unitless($val),$val * 1em,number(px($val)) * 0.0625em * 100/number($base-font-scale));
@for $i from 2 through length($args){$em:$em / number(em(nth($args,$i)))}
@return $em;
}
@function rem($val){ @return if(isNaN($val), null, if(unitless($val), $val * 1rem, number(px($val)) * 0.0625rem * 100/number($base-font-scale) )); }
@function pt($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1pt, number(px($val)) * 0.75pt)); }
@function pc($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1pc, number(px($val)) * 0.0625pc)); }
@function in($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1in, number(px($val)) * 0.010416667in)); }
@function mm($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1mm, number(px($val)) * 0.264583333mm)); }
@function cm($val) { @return if(isNaN($val), null, if(unitless($val), $val * 1cm, number(px($val)) * 0.026458333cm)); }
@function pct($val,$base:1){ @return if(isNaN($val), null, percentage(number(px($val))/number(px($base)))); }
// Angle conversion using deg as base
@function deg($val){
@if(isNaN($val)){@return null;}
$u:unit($val);
$u:if($u==deg ,1,
if($u==grad,1.111111111,
if($u==turn,0.002777778,
if($u==rad, 0.017453293,
1))));
@return number($val) / $u * 1deg;
}
@function grad($val){ @return if(isNaN($val),null,if(unitless($val),$val * 1grad,number(deg($val)) * 1.11111111grad)); }
@function turn($val){ @return if(isNaN($val),null,if(unitless($val),$val * 1turn,number(deg($val)) * 0.002777778turn)); }
@function rad($val) { @return if(isNaN($val),null,if(unitless($val),$val * 1rad ,number(deg($val)) * 0.017453293rad)); }
.test { px2em:em(24px)}
.test { em2px:px(1.5em)}
.test {
px2em: 1.5em;
}
.test {
em2px: 24px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment