Warning: include(/home/185104/domains/s185104.gridserver.com/html/wp-content/plugins/wp-synhighlight/object.php): failed to open stream: No such file or directory in /nfs/c06/h04/mnt/185104/domains/tommaitland.net/html/wp-config.php on line 42

Warning: include(): Failed opening '/home/185104/domains/s185104.gridserver.com/html/wp-content/plugins/wp-synhighlight/object.php' for inclusion (include_path='.:/usr/local/php-5.6.21/share/pear') in /nfs/c06/h04/mnt/185104/domains/tommaitland.net/html/wp-config.php on line 42
Converting Pixels to EMs with LESS - Tom Maitland

Tom Maitland

Creates digital things at Agency. WordPress developer. Web designer. Communicates for UN Youth Australia.

Converting Pixels to EMs with LESS

22 October 2012

I’ve just discovered LESS, the CSS pre-processor. I’m hooked, but more on that later.

Here’s a quick little LESS mixin to do the PX to EM conversion direct in your stylesheet. You need to know the target pixel value, and the context. It makes using EMs site-wide so much easier.

[codesyntax lang=”css”]

@base-size: 16;

.em-size( @value: @base-size, @context: @base-size ) {
	font-size: (@value / @context) + 0em;
}

[/codesyntax]

Example Usage

[codesyntax lang=”css”]

.em-size(13,16); // 13px with a context of 16px

[/codesyntax]