SASS is a really powerful tool when you write styles for your web application. We use it to maintain a small SASS framework that our applications can extend. This way, we can share fixes to our components across our applications without the need to repair a broken margin or a bad overflow in every application’s CSS.
This also makes it super convenient to maintain a consistent behavior in every app. Instead of having custom error messages in every one of them, you have a shared class that all can use, extend and rely upon. And if you update the underlying framework, the behavior stays consistent.
But there was one thing I found to be notoriously hard to do in SASS. And that’s configuring the components.
If your application just wants to adjust the blue color palet to match a client’s corporate image, you would have to either edit the library, or do some sort of black magic.
But lately I found out that this is a non-issue if you use
!default. This keyword is appended to a variable definition and implies that the variable is only overridden if it wasn’t set to begin with.
So, now my library code can be something like this:
$blue : #00F !default;
$button-radius: .3rem !default;
Now, if a project needs a bit of configuration on top of our base styles, they can use something like this:
@use "./library/main.scss" with (
$blue : #F00, //Actually red
To override our default settings.
Update: You should consider that the
use documentation on the SASS page says you should not use this and replace it with mixins instead. We’ll be publishing an updated tutorial later. Since I feel like their suggestions on how to build the styles feels brutally complicated too.