DEV Community

Nicholas Fazzolari
Nicholas Fazzolari

Posted on

Using 'null' in SASS/SCSS Mixins to Mute Arguments

The Discovery

I'm working on styling some boxes, something front-end web developers are (should) be familiar with. I use SASS to write my CSS. I needed some rounded corners so I wrote a mixin that looks like this:

The Issue & Dirty Solution

I included the mixin in a CSS class to see my result.

In the browser the result was what I expected. Eight pixel rounded borders on my box. However, for one of the boxes I was working on I only needed the top-left and top-right corners rounded so I set the bottom-left and bottom-right arguments to 0px and again, the result was correct in the browser; sharp bottom corners and nice eight pixel rounded top borders. Oh yeah, the CSS compiled without errors too.

The Optimization

I do my best to work in a mobile first mindset, I value optimization and performance. With my rudimentary understanding of the compilation process from SASS to CSS I suspected that setting the arguments of the mixin to a 0px value would keep the two unneeded CSS rules in the compiled CSS.

I was right.

This could add up quickly and generated many extra line of CSS that are not needed. I decided to test something, something I have picked up during my CS education: Try null and see what happens in a situation like this. null appears in many programming and scripting languages and can be powerful in the right situations.

I changed my include to this:

and compiled the code. No error! Being somewhat proud of myself and excited I looked into the compiled .css file and found the following (and desired) result:


For this example we ended up with two less lines of CSS. However, at scale this could save thousands of lines of unneeded CSS. This also makes minifying more rewarding.

I hope this was useful for some people who like squeezing more optimization out of their front-end code.

If you enjoyed this content and want to support a poor freelancing student so I can eat and produce more content in the future, I accept donations via PayPal

Top comments (0)