Skip to content

Instantly share code, notes, and snippets.

@mistergraphx
Last active August 29, 2015 14:21
Show Gist options
  • Save mistergraphx/e7dddcaf0afe844bca47 to your computer and use it in GitHub Desktop.
Save mistergraphx/e7dddcaf0afe844bca47 to your computer and use it in GitHub Desktop.
A sass converting function
// ----
// 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 */
}
@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