soundstep/EapbOx.markdown

## EapbOx.markdown

      
    Raw
  

              EapbOx.markdown
            
          
    SASS Font calculation

A Pen by Romuald Quantin on CodePen.
License.

  
## index.html
<body>
  <div class="test">Hello</div>
</body>

## style.scss
@import "compass/css3";
$base-font-size: 16px !default;
$base-line-height: 16px !default;

$default-unit: 1rem !default; // 1px or 1em or 1rem
$px-fallback: true !default; // Adds fallback px values for old browsers when using rems

/**
 *  @functon value
 *
 *  Given a px value, returns it in the default unit
 *
 *  Parameters:
 *  $px-value:      The px value
 *  $baseline-px:   Unit to output the value in
 *  $default-unit:  The font-size on the HTML element
 */
@function value($px-value, $baseline-px: $base-font-size, $default-unit: $default-unit) {
  // Convert the baseline into rems
  $baseline-rem: $baseline-px / $default-unit;
  @return if($px-value == 0, $px-value, $px-value / $baseline-rem);
}

.test {
  font-size: value(100px);
}
	@import "compass/css3";
	$base-font-size: 16px !default;
	$base-line-height: 16px !default;

	$default-unit: 1rem !default; // 1px or 1em or 1rem
	$px-fallback: true !default; // Adds fallback px values for old browsers when using rems

	/**
	* @functon value
	*
	* Given a px value, returns it in the default unit
	*
	* Parameters:
	* $px-value: The px value
	* $baseline-px: Unit to output the value in
	* $default-unit: The font-size on the HTML element
	*/
	@function value($px-value, $baseline-px: $base-font-size, $default-unit: $default-unit) {
	// Convert the baseline into rems
	$baseline-rem: $baseline-px / $default-unit;
	@return if($px-value == 0, $px-value, $px-value / $baseline-rem);
	}

	.test {
	font-size: value(100px);
	}