Last active
August 29, 2015 14:21
-
-
Save mistergraphx/e7dddcaf0afe844bca47 to your computer and use it in GitHub Desktop.
A sass converting function
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
// ---- | |
// libsass (v3.2.4) | |
// ---- | |
@import "bourbon/bourbon"; | |
@import "neat/neat"; | |
/* @function convert | |
Les point sont calculés en fonction d'un point par pouce de 72 et un pixels par pouce de 96 | |
definis par les variables `point-per-inch` et `pixel-per-inch` | |
@param $value {int} - The mesure you want to convert | |
@param $currentUnit {string} (px,ems,percent,pt) - From | |
@param $convertUnit {string} (px,ems,percent,pt) - Destination | |
@var $point-per-inch (72 !default) - | |
@var $pixel-per-inch (96 (default) | |
@see - Unit and convertions rules <http://outils-css.aliasdmc.fr/convertir-unites-de-longueurs-css.php#note_2> | |
@source - <http://www.sitepoint.com/converting-typographic-units-sass/> | |
Styleguide libs.functions.convert | |
*/ | |
// Default | |
$point-per-inch:72 !default; | |
$pixel-per-inch:96 !default; | |
@function convert($value, $currentUnit, $convertUnit,$em-base:$em-base){ | |
// First we get the $em-base defined in Bourbon Neat | |
// or set it explicitly when the function is called | |
@if unitless($em-base){ | |
$error: "#{$em-base} has no unit, you must set the unit (px) explicitly to convert"; | |
@warn $error; | |
@return $error; | |
} | |
// px $em-base | |
@else if unit($em-base) != 'px'{ | |
$error: "#{$em-base} must be in (px) to convert"; | |
@warn $error; | |
@return $error; | |
} | |
@else { | |
$em-base: strip-units($em-base); | |
} | |
@if $currentUnit == px{ | |
@if $convertUnit == ems{ | |
@return $value / $em-base+em; | |
} | |
@else if $convertUnit == percent{ | |
@return percentage($value / $em-base); | |
} | |
@else if $convertUnit == pts { | |
// taille en pixels * (points par pouces / pixels par pouces) | |
@return $value * ($point-per-inch / $pixel-per-inch)+pt; | |
} | |
}@else if $currentUnit == ems{ | |
@if $convertUnit == px{ | |
@return $value * $em-base+px; | |
} | |
@else if $convertUnit == percent{ | |
@return percentage($value); | |
} | |
}@else if $currentUnit == percent{ | |
@if $convertUnit == px{ | |
@return $value * $em-base / 100+px; | |
} | |
@else if $convertUnit == ems{ | |
@return $value / 100+em; | |
} | |
}@else if $currentUnit == pts{ | |
$pts-ratio: $em-base * ($point-per-inch / $pixel-per-inch); | |
@if $convertUnit == px{ | |
// convert point to pixel: pixels = point * 96 (default pixel per inch) / 72 (default point per inch) | |
@return $value * ($pixel-per-inch/$point-per-inch)+px; | |
} | |
@else if $convertUnit == ems{ | |
@return $value / $pts-ratio +em; | |
} | |
@else if $convertUnit == percent{ | |
@return percentage($value / $pts-ratio); | |
} | |
} | |
} | |
// VARIABLES | SETTINGS | |
$em-base: 16px; // Bourbon neat base em | |
// USAGE | |
// ------------------------------------------------*/ | |
// PIXELS | |
// ------------------------------------------------*/ | |
.pixel2percentage{ | |
font-size: convert(18, px, percent); /* converted from pixels 2 percent */ | |
} | |
.pixel2points{ | |
font-size: convert(16,px,pts); /* converted from px 2 points */ | |
} | |
// ------------------------------------------------*/ | |
// POINTS | |
// ------------------------------------------------*/ | |
.points2ems{ | |
font-size: convert(13, pts, ems); /* converted from points 2 ems */ | |
} | |
.points2pixels{ | |
font-size: convert(13, pts, px); /* converted from points 2 pixels */ | |
} | |
.points2percent{ | |
font-size: convert(13, pts, percent); /* converted from points 2 percent */ | |
} | |
// ------------------------------------------------*/ | |
// EMS | |
// ------------------------------------------------*/ | |
.ems2pixels{ | |
font-size: convert(2.5, ems, px); /* converted from ems */ | |
} | |
.ems2percent{ | |
font-size: convert(2.5, ems, percent); /* converted from ems 2 percent */ | |
} | |
// ------------------------------------------------*/ | |
// PERCENTAGE | |
// ------------------------------------------------*/ | |
.percent2pixels{ | |
font-size: convert(234, percent, px); /* converted from percentage */ | |
} |
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
@charset "UTF-8"; | |
html { | |
box-sizing: border-box; | |
} | |
*, | |
*::after, | |
*::before { | |
box-sizing: inherit; | |
} | |
/* @function convert | |
Les point sont calculés en fonction d'un point par pouce de 72 et un pixels par pouce de 96 | |
definis par les variables `point-per-inch` et `pixel-per-inch` | |
@param $value {int} - The mesure you want to convert | |
@param $currentUnit {string} (px,ems,percent,pt) - From | |
@param $convertUnit {string} (px,ems,percent,pt) - Destination | |
@var $point-per-inch (72 !default) - | |
@var $pixel-per-inch (96 (default) | |
@see - Unit and convertions rules <http://outils-css.aliasdmc.fr/convertir-unites-de-longueurs-css.php#note_2> | |
@source - <http://www.sitepoint.com/converting-typographic-units-sass/> | |
Styleguide libs.functions.convert | |
*/ | |
.pixel2percentage { | |
font-size: 112.5%; | |
/* converted from pixels 2 percent */ | |
} | |
.pixel2points { | |
font-size: 12pt; | |
/* converted from px 2 points */ | |
} | |
.points2ems { | |
font-size: 1.08333em; | |
/* converted from points 2 ems */ | |
} | |
.points2pixels { | |
font-size: 17.33333px; | |
/* converted from points 2 pixels */ | |
} | |
.points2percent { | |
font-size: 108.33333%; | |
/* converted from points 2 percent */ | |
} | |
.ems2pixels { | |
font-size: 40px; | |
/* converted from ems */ | |
} | |
.ems2percent { | |
font-size: 250%; | |
/* converted from ems 2 percent */ | |
} | |
.percent2pixels { | |
font-size: 37.44px; | |
/* converted from percentage */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment