Image for post
Image for post

4 Simple SASS Techniques to Clean Up Your Code

Matt Maribojoc
Dec 12, 2019 · 6 min read

These are just some of the tips that I’ve learned from reading/working in SASS for a few years. Hopefully, they help you out a little bit because I really wish I knew and followed these 8 tips way earlier.

1. Understand and Use Ampersands/This

If you’re not familiar, here’s a great article by Michael Weaver on the topic.

In short, you want to organize your elements using the:

  • Block — a section of content (e.g. form, navbar)
  • Element — any element in the block (e.g. text input, buttons)
  • Modifier — a version of the element (e.g. featured elements, inactive buttons)

Here’s an example of a div section using the BEM naming convention.

<div class='register'>
<input type='text' class='register__input' placeholder='Name'/>
<input type='text' class='register__input--email' placeholder='Email'/>
<button class='register__btn'> Submit </button>
<button class='register__help'> Help </button>
</div>

Then, the corresponding SCSS without using ampersands would be.

.register {
.register__input {
width: 100%;
.register__input--email {
color: #ccc;
}
}
.register__btn {
font-weight: bold;
.register__btn--gray {
background-color: blue;
}
.register__help {
background-color: red;
}
}
}

However, the beauty of the ampersand is that it is equal to the selector of the parent selector. So instead of having to repeat the Block and Element, we can use & instead. This is great just in case you want to rename certain selectors down the line you don’t have to change a ton of lines in your stylesheets.

The above SCSS rewritten using ampersands becomes

.register {
&__input {
width: 100%;
&--email {
color: #ccc;
}
}
&__btn {
font-weight: bold;
&--gray {
background-color: blue;
}
.register__help {
background-color: red;
}
}
}

But what about that last class? The one that doesn’t strictly follow BEM Conventions? As you can see it doesn’t have the same name as it’s direct parent so using the ampersand does not work.

While we try to avoid this case, it’ll definitely happen, for (somewhat) good reasons during actual projects. But luckily, we can still handle this using local variables.

All we have to do is declare a local variable in the .register class to save the value of that selector. Then, because of SASS variable scope, we can access this variable in the nested .register__help class.

Simplifying the code down, it would look like this.

.register {
$this: &; // saves .register into the $this variable
&__btn {
#{$this}__help { // equals .register__help
background-color: red;
}
}
}

Perfect.

2. Use Mixins Reponsibly

One thing we often overlook when using mixins is the fact that it results in repetitive code.

For example…

@mixin btn {
color: white;
background-color: green;
}
.btn-1 {
@include btn;
font-size: 1.1em;
}
.btn-2 {
@include btn;
font-size: 0.9em;
}

Compiles to…

.btn-1 {
color: white;
background-color: green;
font-size: 1.1em;
}
.btn-2 {
color: white;
background-color: green;
font-size: 0.9em;
}

In my opinion, the only time it’s necessary to use mixins is when you need to pass a variable — basically, when elements use the mixin differently (e.g. different background-image URLs or something). Or when you need to pass content to the mixin.

Basically, don’t use mixins as the default. Have a reason.

For example, if your mixin accepts arguments or uses content blocks, then you have a valid reason to use a mixin. Otherwise, you’re better off reading the next tip.

3. Instead Consider Using Extends/Placeholders

The perfect use case for extends over mixins is when you simply just want to use the same exact styles for multiple elements. However, you have to be careful when it comes to overwriting styles. For example, with a bunch of buttons with different styles, that might be a good use case for mixins.

Let’s take a look at how extends works by rewriting the example from the last tip. All we have to do is declare a parent class and then extend it in the others.

.btn {
color: white;
background-color: green;
}
.btn-1 {
@extend .btn;
font-size: 1.1em;
}
.btn-2 {
@extend .btn;
font-size: 0.9em;
}

When compiled into CSS, this becomes…

.btn, .btn-1, .btn-2 {
color: white;
background-color: green;
}
.btn-1 {
font-size: 1.1em;
}
.btn-2 {
font-size: 0.9em;
}

As you can see, this is much more succint and DRY. So be smart about whether or not you choose extends or mixins for your elements.

Going into a little more depth, let’s say you don’t want the parent class to compile into the final CSS and just want it to be used more like a temp variable for the other classes. That’s when we can declare it as a placeholder — something that acts just like a class selector, but isn’t included in the compiled CSS.

To do this, all we have to do is replace the . with a % in the selector we want to be a placeholder.

%btn {
color: white;
background-color: green;
}
.btn-1 {
@extend .btn;
font-size: 1.1em;
}
.btn-2 {
@extend .btn;
font-size: 0.9em;
}

Then, our compiled CSS would look like.

.btn-1, .btn-2 {
color: white;
background-color: green;
}
.btn-1 {
font-size: 1.1em;
}
.btn-2 {
font-size: 0.9em;
}

While this short example may not be a necessary use case for this technique, it’s still great to have in the knowledge bank.

4. Take Advantage of Color Functions

While we could hardcode in values, an easier way is to use the SASS color darken and lighten functions to programatically darken/lighten your colors.

There are so many other useful SASS color functions that you could dive into, especially if you’re working with CSS images.

Some of the most useful ones in my opinion are:

  • darken($color, $amount) — darkens a color by a certain percentage
  • lighten($color, $amount) — lightens a color by a certain percentage
  • desaturate($color, $amount)- makes a color less saturated
  • grayscale($color)- converts the color into a grayscale with the same lightness
  • fade-out($color, $amount)-increases a colors transparence

But if you would like to see the full list of options, just check out the SASS color documentation

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

Matt Maribojoc

Written by

I run a VueJS community over at https://learnvue.co, develop web sites, and post whatever I find cool on the Internet.

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

Matt Maribojoc

Written by

I run a VueJS community over at https://learnvue.co, develop web sites, and post whatever I find cool on the Internet.

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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