DEV Community

Nicholas Fazzolari
Nicholas Fazzolari

Posted on

2

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:

// General mixin to set all border radii
@mixin setIndividualBorderRadius($topLeft, $topRight, $bottomLeft, $bottomRight) {
border-top-left-radius: $topLeft;
border-top-right-radius: $topRight;
border-bottom-left-radius: $bottomLeft;
border-bottom-right-radius: $bottomRight;
}

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.

.some-box {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; }
view raw some-box.css hosted with ❤ by GitHub

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:

.some-box {
border-top-left-radius: 8px;
border-top-right-radius: 8px; }
view raw some-box.css hosted with ❤ by GitHub

Conclusion

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more