DEV Community

Cover image for 3 Things you might not know SASS can do
Charanjit Chana
Charanjit Chana

Posted on • Updated on • Originally published at 1thingaweek.com

3 Things you might not know SASS can do

Originally posted on my blog

I love working with CSS, it's such a powerful tool when used right. Over 10 years ago, I came across LESS and was converted very quickly. SASS has been around longer, but it wasn't really on my radar and LESS was just fine.

Then around 5 years ago, I was introduced to CodeKit and SASS via Bourbon and it's been my preprocessor of choice ever since.

In reality, I've used SASS to keep my CSS readable and maintainable, but there are some really nice features that you may not be aware of.

1. Apply rgba calculations to HEX codes

You can take your HEX code and pass it to a rgba function to apply alpha to it. Modern browsers already allow you to add an additional two digits to your HEX colour code to determine it's opacity, but that's not supported everywhere.

color: rgba(#F00, 0.5); // rgba(255, 0, 0, 0.5)
Enter fullscreen mode Exit fullscreen mode

Instead of specifying the reg, green, and blue values, pass the colour code and it will get converted. This is really useful for when you have variables to specify your colours already set up. No need to store or calculate the rgb values, just pass the variable and away you go!

color: rgba($myColor, 0.5);
Enter fullscreen mode Exit fullscreen mode

2. Nest media queries

A relatively new one for me and one that I wasn't sold on initially. If you have a lot of things that depend on screen size, this makes it much more maintainable and obvious when things will change.

.myClass {
    width: 100%;
    @media screen and (min-width: 800px) {
        max-width: 800px;
    }
}
Enter fullscreen mode Exit fullscreen mode

A simple example, but when you're looking at the definition for .myClass you'll now know exactly what responsive attributes it has.

3. Apply maths to colours

Colour palettes can be hard but what you can do is add and subtract colours from each other. This allows you to create new shades of colours to to blend them together.

element {
    color: ($myColour1 + $myColour2);
}
Enter fullscreen mode Exit fullscreen mode

I've wrapped them in brackets to remove any doubt as to what should happen but it's not required. You can pass variables or colour codes.

element {
    color: (#111 + #333); //color: #444
}
Enter fullscreen mode Exit fullscreen mode

It is worth noting that I recently discovered that applying maths to colours is actually dependent on your SASS compiler. Libsass has no issues, but Dartsass doesn't like it all.

Top comments (0)