Created
November 3, 2013 09:14
-
-
Save jakob-e/7288291 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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)} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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