Skip to content

Instantly share code, notes, and snippets.

@scottkellum
Created March 9, 2012 03:14
Show Gist options
  • Save scottkellum/2004835 to your computer and use it in GitHub Desktop.
Save scottkellum/2004835 to your computer and use it in GitHub Desktop.
Unit converter
/////////////////////////////
// SIZE
/////////////////////////////
// Base size should be the em height on the html element
$base-size: 16px !default
$pi: 3.14159265 !default
// Android uses density-independent pixels. Using the same terminology here for conversions.
// Convert dips to em, rem, or px
$dip-conversion: em !default
// Context offset
$em-offset: 1 !default
// Convert dips to em or rem (px will not work because the W3C spec considers px to be density independent pixels)
$px-conversion: em !default
@function dip($number, $em-offset, $dip-conversion)
$unitless-em-offset: $em-offset / 1em
@if unitless($em-offset)
$unitless-em-offset: $em-offset
@if $dip-conversion == px
@return $number * 1px
@if $dip-conversion == em
@return ($number / ($base-size / 1px)) * (1 / $unitless-em-offset) * 1em
@if $dip-conversion == rem
@return $number / ($base-size / 1px) * 1rem
@function dp($number, $em-offset, $dip-conversion)
@return dip($number, $em-offset, $dip-conversion)
// Simple px => em conversion
@function em($number, $em-offset)
@return dip($number, $em-offset, em)
// Simple px => rem conversion
@function rem($number, $em-offset)
@return dip($number, $em-offset, rem)
/////////////////////////////
// TIME
/////////////////////////////
@function ms($time)
@if unit($time) == ms
@return $time
@if unit($time) == s
@return ($time / 1s) * 1000ms
@else
@warn "#{unit($time)} is not a unit of time"
@function s($time)
@if unit($time) == s
@return $time
@if unit($time) == ms
@return ($time / 1ms) / 1000 * 1s
@else
@warn "#{unit($time)} is not a unit of time"
/////////////////////////////
// FREQUENCY
/////////////////////////////
@function Hz($frequency)
@if unit($frequency) == Hz
@return $frequency
@if unit($frequency) == kHz
@return ($frequency / 1kHz) * 1000Hz
@else
@warn "#{unit($frequency)} is not a unit of frequency"
@function kHz($frequency)
@if unit($frequency) == kHz
@return $frequency
@if unit($frequency) == Hz
@return ($frequency / 1Hz) / 1000 * 1kHz
@else
@warn "#{unit($frequency)} is not a unit of frequency"
/////////////////////////////
// SCREEN
/////////////////////////////
@function dpi($resolution)
@if unit($resolution) == dpi
@return $resolution
@if unit($resolution) == dpcm
@return ($resolution / 1dpcm) / 2.54 * 1dpi
@else
@warn "#{unit($resolution)} is not a unit of resolution"
@function dpcm($resolution)
@if unit($resolution) == dpcm
@return $resolution
@if unit($resolution) == dpi
@return ($resolution / 1dpi) * 2.54dpcm
@else
@warn "#{unit($resolution)} is not a unit of resolution"
/////////////////////////////
// ANGLE MEASUREMENTS
/////////////////////////////
@function deg($value)
@if unit($value) == deg
@return $value
@if unit($value) == rad
@return ( $value / 1rad ) * 180 / $pi * 1deg
@if unit($value) == grad
@return ( $value / 1grad ) * 180 / $pi * 1deg
@if unit($value) == turn
@return ( $value / 1turn ) * 180 / $pi * 1deg
@else
@warn "#{unit($value)} is not a unit of angle"
@function rad($value)
@if unit($value) == rad
@return $value
@if unit($value) == deg
@return ( $value / 1rad ) * 180 / $pi * 1deg
@if unit($value) == grad
@return ( $value / 1grad ) * 180 / $pi * 1deg
@if unit($value) == turn
@return ( $value / 1turn ) * 180 / $pi * 1deg
@else
@warn "#{unit($value)} is not a unit of angle"
@function grad($value)
@if unit($value) == grad
@return $value
@if unit($value) == rad
@return ( $value / 1rad ) * 180 / $pi * 1deg
@if unit($value) == deg
@return ( $value / 1grad ) * 180 / $pi * 1deg
@if unit($value) == turn
@return ( $value / 1turn ) * 180 / $pi * 1deg
@else
@warn "#{unit($value)} is not a unit of angle"
@function turn($value)
@if unit($value) == turn
@return $value
@if unit($value) == rad
@return ( $value / 1rad ) * 180 / $pi * 1deg
@if unit($value) == grad
@return ( $value / 1grad ) * 180 / $pi * 1deg
@if unit($value) == deg
@return ( $value / 1turn ) * 180 / $pi * 1deg
@else
@warn "#{unit($value)} is not a unit of angle"
@warn (deg(1.4rad))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment