CSS Custom Properties in a Sass project

Last week I took a look at how I set up a Sass map, to use my colors on my site, and I teased you a bit about how I went and set up some CSS custom properties.

Sidenote: If you’re not familiar with CSS custom properties (commonly referred to as CSS variables), you can check out my YouTube series on them, which I think is a nice introduction to them (as I would, 😊)!

Why I wanted to use CSS custom properties

Since you’re on my site, you might have noticed that each “section” or page uses it’s own color, and that color is unique to that design. It’s used for the headers links and button colors.

The setup

So instead of having to declare a different value everywhere, I set up this to start with:

:root {
  --main: #{clr(neutral)}; // placeholder

I set this neutral color as a placeholder, so that if I forget to use it somewhere, or I create a new page, this will be the default anywhere I use --main.

You’ll notice that I had to use interpolation where I decaled my --main: #{clr(neutral)}. This took me a little while to figure out, as without it, it would spit out clr(neutral) as the color in my compiled CSS, and not the actual color I wanted (if you aren’t familiar with interpolation, it’s just wrapping something in sass with #{ ... } so that it will interpolate the value inside to what you need). If you were using it with just a normal color value here, it wouldn’t be an issue, but because I wanted to use my map function, it wouldn’t work without this.

How I used it on my site

Each page of mine has it’s own class on the body so that I can easily select it. Then, all I have to do is this:

.youtube {
  --main: #{clr(yt)};

.articles {
  --main: #{clr(articles)};

.community {
  --main: #{clr(com)};

.courses {
  --main: #{clr(course)};

The real benefit here is being able to reduce the amount of code that I write, as for all my styles, the headers, links, and a few other elements, I just have to set their color or background to var(--main). For example:

.section__title {
  color: var(--main);

As I mentioned, I also used this on my links and some other elements. Then, by changing the color of --main for each page, the color cascades throughout that page.

Other ways of using this

There are a ton of ways that this can be used other than themeing individual pages. It can be used for themeing sites, or, as I’m going to look at in a future post, themeing individual components on a site. All of it let’s you write a lot less code if you set things up well, and in reality you don’t have to do it with Sass. I used Sass because it’s a big part of my workflow, but I’m starting to use CSS variables more and more, and I’m loving them more every time I do :).

Read More

Using a Sass map for my colors

Last week I took a look at how I chose my color scheme, now for a little insight into how I used it when writing my Sass.

Using my colors

First, I created a variable for all my colors. This was just to make life easier to reference, or make changes to later on:

$primary-color: #EE6352;
$youtube: #D16E8D;
$articles: #FFAC83;
$community: #3F78C9;
$courses: #49C4A3;
$white: #FFF;
$black: #444A51;

$lighten: 5;
$darken: 25;

You’ll notice a $lighten and $darken variables there too. That was so I could lighten everything by the same amount, and very quickly change how much I’m lightening or darkening things by.

Read More

Picking colors

Creating a color scheme can be a pain in the ass. A lot of ‘color scheme’ websites, such as Adobe color and coolors give you 5 colors. My general advice is always to start with only three colors:

This is by far the easiest way to start with a color scheme which will always look nice. As far as the dark one, try to avoid pure black, but instead go with a really dark color, like I did with my text on this site.

Read More

Welcome to the blog

A new site, and a brand spanking new blog to go along with it! I’m pretty excited about this!

What to expect

This blog is the natural progression of my existing newsletter, so if you’re a subscriber already, it’ll seem very familiar, just better! For those of you who weren’t subscribers, I’ve been exploring a lot of lesser known and misunderstood CSS properties, as well as some general CSS tips and tricks. I’ve converted a handful of them, so there are some older posts you can go explore right now if you’d like!

The reason I wanted to turn this into a blog, instead of only a newsletter, is because I wanted to:

One of the biggest issues with the newsletter was it was hard to show the results of what I was doing. I’d create a codepen, and then take screenshots of everything and then have to add the images in. Now I can just embed the damn codepen and you guys can see it in action and play with the code!

Read More


So, it turns out doing something like this is super easy:

The Markup

The markup for this is nice and basic, pretty much a parent, with the two children:

<div class="card">
  <div class="card__title">Title here</div>
  <div class="card__body">Lorem ipsum dolor sit amet... </div>
Read More

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!

Read More

Focus With

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!

Read More

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!

Read More

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 (&).

Read More