Skip to content

Instantly share code, notes, and snippets.

@matthewlein
Last active December 30, 2015 09:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matthewlein/7813199 to your computer and use it in GitHub Desktop.
Save matthewlein/7813199 to your computer and use it in GitHub Desktop.
Using ems is great for relational sizing, but with one big caveat, if your base font size changes, all your ems are off. DEVASTATING! Use this node script to change all ems in a folder to a new ratio based on your old and new base sizes. If you're editing lots and lots of files this can save you some time.

Using ems is great for relational sizing, but with one big caveat, if your base font size changes, all your ems are off. DEVASTATING! Use this node script to change all ems in a folder to a new ratio based on your old and new base sizes.

For example:

body {
    font-size: 14px;
}
p {
    font-size: 1.5em; /* 21px */
}

changes to

body {
    font-size: 13px;
}
p {
    font-size: 1.615em; /* 21px */
}

PLEASE NOTE:

  • You have to manually change your body font-size.
  • This script does not have any idea about nested ems and what that would mean.
  • This will also change padding, margin, etc that don't need to change after you set the new font-size. If you just want to change font-sizes you can edit the script to look for that. Or, like I did look through the commit differences and undo the lines you don't want.
// ************************************************************************* //
// ========================================================================= //
//
// Covert ems to a new base value
//
// for example, if your body was 14px, and now its 13px
//
// requires findit. Global install:
// 'npm install findit -g'
//
// set your old px value, new px value, and directory
//
// run with:
// 'node path/to/changeEms.js'
//
// ========================================================================= //
// ************************************************************************* //
// change these to your px values
var oldBasePx = 14;
var newBasePx = 13;
// relative to the directory you'll be running node from
var directory = 'path/to/css/or/scss';
// get the ratio
var ratio = oldBasePx/newBasePx;
// requires
var fs = require('fs');
var find = require('findit');
//This sets up the file finder
var finder = find(directory);
//This listens for files found
finder.on('file', function (file) {
changeEms(file);
});
// finds and changes ems
function changeEms(file) {
fs.readFile(file, 'utf8', function (err,data) {
if (err) {
return console.log(err);
}
// regex for number in ems
var regEx = /([0-9\.]+)em/g;
// replace the old file em matches with the new ratio
var newData = data.replace(regEx, function(match, $1) {
// set the new ratio. 3 decimal points
var newValue = ($1 * ratio).toFixed(3);
// return new value of ems
return newValue + 'em';
});
// check it out if you want
// console.log(newData);
// rewrite the file with modified data
fs.writeFile(file, newData, function(err) {
if (err) throw err;
console.log( file + ' saved!');
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment