3 Things you might not know SASS can do

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)
color: rgba($myColor, 0.5);

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;
}
}

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);
}
element {
color: (#111 + #333); //color: #444
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Charanjit Chana

Charanjit Chana

Head of Development. I like fast & responsive websites. 🤙