My Articles

Dynamic text color with Sass

CSS is awesome and with the addition of Custom Properties and things like calc() it’s really, really powerful. Sass is still a major part of my workflow though. It saves allows me to work faster and be better organized, but this newsletter is about neat tips and tricks and fun little things, so in staying on topic, here is a fun way you can use Sass to dynamically set your font color to ensure high contrast with your background color!

:focus-within

The :focus pseudo selector is useful, but it only allows us to style something which has focus directly on it. What if we want to style the parent of the thing with focus?

The common example you’ll find is changing the background, or border, of a form when someone goes inside it:

form:focus-within {
  background: limegreen;
}

With the above code, as soon as someone either clicks or tabs into an input, the background of the entire form will change!

I'm always surprised more people don't know this about CSS backgrounds

Maybe it's because I like playing around with these things, but it always amazes me how few people know that you can set multiple backgrounds on something, and there are some good use cases for it as well!

Sass and BEM ftw

The parent selector in Sass is amazing. I love Sass for a lot of reasons, but this is a really big one (there are many other reasons I love Sass too, which is why I made a course on it).

In Sass, you can use nesting, which is when you nest a selector inside another selector. It's powerful, though it can lead to some messy code if you aren't careful. One really cool thing with nesting though, is if you combine it with the parent selector, it becomes really powerful.

To create a parent selector, you just have to use the ampersand character (&).