mistergraphx
5/18/2015 - 8:56 AM

A sass converting function

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 */
}