Change all font-size and respect the power of Perl
Most Web-Developers are aware of the language called Perl, but they don’t know it, so they aren’t aware of its capabilities.
Some weeks ago, I had to refactor some rem values within my styles. For those who don’t know what these (r)em’s are, here is an example:
<div style=”font-size: 10px” id="base-10">
<div style=”font-size:0.75em”>February 20</div>
<div style=”font-size: 2em”>Hello</div>
</div>
In the example above the base font-size for the #base-10
s 10px, so the Title “Hello” with 2em will be 20px height and the subtitle (Date) will be 7,5px height. So “rem” as root-em refers to the font-size of the html
element.
Now, as our knowledge improved lets consider the following situation:
You have to change the base font-size from 10px to 16px but you want that all of your styles are still the same. For example a label with 1.2rem on 10px base, must be converted to 0.75rem for the 16px base.
How would you do it in a code base with 100's of scss/css files and over 1000 occurrences of rem usages?
(Problem: most RegEx implementations do not allow code execution during
You can write a script in any language you want, just try it.. Parse all files perform some regex, get the values out of it, the cast the value to a number, calculate the right output replace the previous value with the new one and save the file.
However, I tried it, and gave up after 3 minutes and 3 lines of code, because I thought, there must be something simpler, and there is: Perl
I knew that Perl is a great language for text manipulation, but I never had to use it actually, because the syntax is somewhat cryptic and I even did’t considered to learn it properly.
But I love the CLI and perl also loves it, so to change all occurrences of rem within my code base from `(X)rem` to `(X/*1.6)rem` all I had to do, is to run this command line expression:
$ perl -pi -e 's/(((\d+)?\.)?\d+)rem/@{[$1 \/ 1.6]}rem/g' `find webapp/src/ -name "*.scss"`
Look at this beauty, I think it’s pretty obvious what it does, and I just wanted to mention, that this is how it should be, and I am glad that perl exists. I respect Perl.
Thanks for reading
PS: In case you have some px values in your code base, which you want to convert to rem.
$ perl -pi -e 's/(((\d+)?\.)?\d+)px/@{[$1 \/ 16]}rem/g' `find webapp/src/ -name "*.scss"`