You might not need SASS anymore

A Web Developer based in Belgium, specialized in PHP & JS development
Search for a command to run...

A Web Developer based in Belgium, specialized in PHP & JS development
No comments yet. Be the first to comment.
I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

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"
}
}
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.
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.
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.