Joe Cianflone JoeCianflone

Did you ever notice that developers and designers have different languages? A designer, working in Photoshop or Sketch, will be talking about things in pixels. Designers make headers that are 48 pixels tall and have 60 pixel line-heights. Developers, like me, tend to think about things in percentages or EMs. We want font-sizes that are 4.8rem and line heights that are 1.6.

Today I want to resolve the pixel font-size issue with Sass.

Let's pretend you've got a new blog to code today. You crack open the design file and you see the following:

Main Header: 32px
Sub-Header: 28px
body copy: 18px

	//Somewhere in a Class...

	Twig_Autoloader::register();
	$this->loader = new Twig_Loader_Filesystem($this->CI->config->item('filepath'));

	$this->twig = new Twig_Environment($this->loader, $this->configs['env']);
	$this->twig->setLexer(new Twig_Lexer($this->twig, $this->configs['tags']));

	$tags = array('if');
	$filters = array('upper');

	<?php
	class Controller extends Slim_Middleware {

	public $params;

	public function __construct() { }

	public function paramConfig() {

	$this->params = $this->app->request()->params();

	→ gulp compile
	module.js:340
	throw err;
	^

	Error: Cannot find module 'amdefine'
	at Function.Module._resolveFilename (module.js:338:15)
	at Function.Module._load (module.js:289:25)
	at Module.require (module.js:366:17)
	at require (module.js:385:17)

	// I hate converting units so here's how to do
	// px to rem conversion with a fallback to px
	// for older browsers...

	/**
	* Resize font from one type to another
	* @param {[type]} $fontSize the font size that you want
	* @param {[type]} $toUnit: rem the unit you want to convert to
	* @param {[type]} $fromUnitSpecific: px default unit we're going to convert from (if you don't set it)
	*

	// ----
	// libsass (v3.3.2)
	// ----

	@function get-value($n) {
	@return $n / ($n * 0 + 1);
	}

	@function get-line-height($font-size, $line-height) {
	@return get-value($line-height / $font-size);

	$mq: (
	'xs': #{'min-width: 480px'},
	'sm': #{'min-width: 576px'},
	'md': #{'min-width: 768px'},
	'wd': #{'min-width: 900px'},
	'xw': #{'min-width: 1024px'},
	'lg': #{'min-width: 1280px'},
	'xl': #{'min-width: 1366px'},
	);

	// ----
	// libsass (v3.3.2)
	// ----

	.person {
	width: 100%;

	&__element {
	width: 80%;
	}