SCSS Unique Id for Cache Busting your CSS

SASS has a lot of built in modules that can help you in your web development project. If you already use SASS / SCSS in your project, this writing might help or remind you about the helpful built in modules that SASS have.

Photo by Paweł Czerwiński on Unsplash

There was a time in web development where you’re wondering why your CSS not displaying the latest fonts or newest images. I have been in that situation “work in my machine” but not work in production. Already checked everything out and there is nothing wrong with my compiled CSS, fonts and images.

Problem was occurred from the machines that not loads newer version of the assets. It is because the machines still serve the old version of the fonts and images in their caches.

I use SCSS that compiled into CSS mostly for all my website projects. The compiled CSS includes all the fonts and images with the directory paths. So to keep all newer version of the assets in the compiled CSS, I have to make all the included fonts and images keeping track all the newer version.

There are common practice to keep included css links in the newer version by adding query params in the filename in the HTML, such as :
<link rel="stylesheet href="assets/css/style.css?v=12345">

So what about the included fonts and images in the CSS?

If you use SCSS / SASS for compiling your CSS, there is built-in function that can help you with this kind of problems.

The sass:string modules

Modules that consist of string manipulations and makes it easy to combine, search, or split apart strings.

An unique id can be use in the filename when you include your assets in CSS files and this is a part of sass:string module.

unique_id();
https://sass-lang.com/documentation/modules/string#unique-id

SCSS has a built-in function called unique_id() that generates a bunch of random numbers.

Every time when SCSS compiled into CSS, the unique id will also generate. This can be use in the filename path when you include your assets. For example you can use inbackground: url('assets/images/logo.png?v=12345') left top no-repeat;

Setting up your unique id in SCSS variables setup :

/* BOOTSTRAP OVERWRITE */
$brand-primary: $color-primary !default;
$brand-success: $color-primary-light !default;
$brand-info: $color-grey !default;
$brand-warning: $color-orange !default;
$brand-danger: $color-red-dark !default;
/* UNIQID */
$uniqeid : unique_id();
$ver : unique_id();

Or just put the unique id in top of your SCSS :

/* UNIQID */
$uniqeid : unique_id();
$ver : unique_id();

SCSS has an Interpolation property that can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS.

Using unique_id() for fonts in SCSS with Interpolation :

@font-face {
   font-family: 'Custom Fonts';
   src: url('asset/images/custom-font.eot?v=#{$uniqeid}');
   src: url('asset/images/custom-font.eot?v=#{$uniqeid}#iefix') format('embedded-opentype'),
url('asset/images/custom-font.woff2?v=#{$uniqeid}') format('woff2'),
url('asset/images/custom-font.woff?v=#{$uniqeid}') format('woff'),
url('asset/images/custom-font.ttf?v=#{$uniqeid}') format('truetype'),
url('asset/images/custom-font.svg?v=#{$uniqeid}#svg') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

Compiled CSS result for @font-face src property :

@font-face {
  font-family: 'Custom Fonts';
  src: url("asset/images/custom-font.eot?v=u7ae88199");
  src: url("asset/images/custom-font.eot?v=u7ae88199#iefix") format("embedded-opentype"), url("asset/images/custom-font.woff2?v=u7ae88199") format("woff2"), url("asset/images/custom-font.woff?v=u7ae88199") format("woff"), url("asset/images/custom-font.ttf?v=u7ae88199") format("truetype"), url("asset/images/custom-font.svg?v=u7ae88199#svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Custom background image function in SCSS mixin :

@mixin imageCacheBust($url) {
   background-image: #{'url("'}#{$url}#{'?v='}#{$ver}#{'")'};
}

How to use image cache bust in SCSS :

.sprite {
    @include imageCacheBust('asset/images/logo.png');
}

Result in compiled CSS in background-image property :

.sprite {
    background-image: url('asset/images/logo.png?v=u95ab40e0');
}

Code sample :

Unique Id in SCSS

Hope to see you guys implement these, it’s kind of annoys me when I had these problems back in the days. Thanks for reading, happy coding!

References :
https://sass-lang.com/documentation/interpolation
https://sass-lang.com/documentation/modules/string