A Pen by Johan Roug.

Easy-SCSS-font-size.markdown

Easy SCSS font-size

Setting font-size and line-height, should be easy. With this CSS, you just type your sizes, and SASS make sit into ems. Quick and easy :)

A Pen by Johan Roug on CodePen.

License.

index.html

<h1>Easy SCSS <br>font-size</h1>

style.scss

@import "compass/css3";
//Our base font size
//******************************************
$basicFontSize: 16;


//Just some styling START
//******************************************
body{
  background: #272822;
  color: #FD971F;
  font-family: Verdana;
  font-size: $basicFontSize;  
}


//Mixin
//******************************************
@mixin font($fontSize, $lineHeight) {
  font-size: ($fontSize/$basicFontSize)+em;
  line-height: ($lineHeight/$fontSize)+em;
}

//Using the mixin
//******************************************
h1{
	@include font(150,130);
}