Ever since I started to learn web development I learned that there are ways that you can build websites more proficient and even by writing less code too. CSS Preprocessors are basically the advanced version of CSS. There are a lot of different preprocessors such as Sass , Less , Stylus and much more, but the most known and used CSS Preprocessor used by many and even myself is Sass.

Now, there are two different types of ways to write Sass, preferably I use SCSS as it is easier and more readable to yourself and others who read your code. Using preprocessors can make a project really easy to maintain and also can also help increase productivity too. It also saves you a lot of time since you won’t have to keep repeating writing code and here you will find out why. I will list a few features that Sass provides us to use and with other preprocessors, they are also similar but just uses different syntax.

Variables

$color-red: #e74c3c;

.text-red {
  color: $color-red;
}
.button-red {
  background: $color-red;
}

As you can see by just typing “$variable_name” and assigning it a colour, we can just use that variable for anything throughout our style sheet. If we wanted to change the variable colour all we would have to change is one line and it would change all the colours that had the variable assigned to it without changing each value one by one which saves us so much time.

This not only works for colours but it can work for anything such as for margins and padding too.

Nesting

nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    text-decoration: none;
    padding: 1rem;

    :hover {
      color: $color-red;
    }
  }
}

Nesting is another great feature with using a preprocessor. It allows you to nest child selectors within their parent selector and also makes it easier to read code too.

Imports

// Separate style sheet of variables
@import 'variables';

// Separate style sheet of reset.css
@import 'reset';

A Sass import grabs the content from inside your imported file and includes it within the compiled stylesheet. Using this can organize your CSS a lot better with no downsides.

There are a whole lot more features that Sass and other preprocessors provide but these are the main ones that I use for each one of my projects.

Thanks for reading!

Have a question? Connect with me via Twitter or send me a message at hello@dylansleith.com