You might not need SASS anymore

Ok. I did it. Back to (almost) plain old regular css for building my last project. You would think that SASS would be absolutely necessary to have a pleasant DX, but as it turns out, I don't think I need it anymore.

I don't know about you, but as far as I'm concerned, I mostly use SASS for 3 reasons:

• To be able to nest declarations

• To split my css into multiples files

• To use variables

As it turns out, if you are using esbuild and targeting a browser that supports css variables (that is, pretty much everything since 2018), you can basically ditch sass and just use esbuild to compile your css.

The magic part of your package.json looks like this (and yes, using bun, even if I'm on windows and bundows had some issues at launch) :

{
  "name": "my project",
  "module": "./public/assets/js/index.js",
  "dependencies": {
    "esbuild": "^0.20"
  },
  "scripts": {
    "build": "esbuild --bundle --minify --loader:.woff2=file --target=safari15.4,chrome88 ./src/css/index.css ./src/js/index.js --outdir=./public/assets",
    "watch": "bun run build -- --watch",
    "start": "bun run build -- --servedir=./public"
  }
}

Nesting declarations

Only supported by browsers from 2023, native css nesting is not ready yet for public consumption at the time of writing this article. But by using esbuild, you can transpile easily your nicely nested css to plain old expanded css.

The syntax is almost the same as the one from SASS.

Splitting files

Again, using esbuild, you simply @import your files and they will be bundled automatically. If you are including woff2 files for local fonts, don't forget the --loader:.woff2=file part of the script.

CSS Variables

On this one, I even think SASS variables are less powerful that CSS variables. It's so cool to have fallback values, to be able to change variables based on media queries, inject them in Javascript, use them in math representation...

I'm still a bit sad about not being able to use properly oklch colors. Yes, they are converted automatically by esbuild, but then you cannot use them as part of a formula, which is, I think, the main reason behind using oklch.