1 Thing A Week 1 Thing
A Week

3 Things you might not know SASS can do Making your code clever and maintainable

Week 135.0 — 25th May '20

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)

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

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

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

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 }

Example on CodePen

I put together a really simple example to show what's possible, feel free to check it out.

Update

Turns out that #3 is dependent on your SASS compiler. The libsass compiler has no issues, but Dartsass doesn't.

More from 1 Thing A Week
« Top 5 Roma kits from the past 20 years How could we improve Facebook, Instagram, Twitter, YouTube and social media in general? Top 3 gadgets around the home »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 135.2 – Tuesday
    1. New York's Plastic Bag Store stocks groceries made from single-use bags dezeen.com
    2. How to make a cyanotype photo print step by step Mathieu Stern on youtube.com
    3. The worst logos ever, redesigned Emanuele Abrate on behance.net
  2. 135.3 – Wednesday
    1. The Past We Can Never Return To – The Anthropocene Reviewed Kurzgesagt – In a Nutshell on youtube.com
    2. IMNU floating clock jara-freund.de
    3. James O'Brien's response to Boris Johnson defending Dominic Cummings lbc.co.uk
    4. The truth about why Cummings hasn't gone: Johnson is too terrified to sack him Marina Hyde on theguardian.com
  3. 135.4 – Thursday
    1. Focus on yourself and find peace there @chamath on twitter.com
    2. Magic Puzzles   $20+ Max Temkin on kickstarter.com
  4. 135.6 – Saturday
    1. Air currents being disrupted by mountain tops u/Randolm on reddit.com
    2. I have a hard time taking compliments theoatmeal.com

Jump to notable items for Week #134, Week #136 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

Find out more about 1 Thing A Week or read the privacy policy.

Archive

You can find a list of all articles in the archive.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit

Basic Analytics