CSS Preprocessors

CSS preprocessors are tools that extend the functionality of CSS by adding features that are not available in pure CSS. The most popular CSS preprocessors are Sass and Less. In this article, we will explore the basics of Sass and Less and how they can make writing CSS easier and more efficient.

Back to TOC

Table of Contents

• Sass
• Variables
• Mixins
• Functions
• Nested Rules
• Less
• Variables
• Mixins
• Nested Rules
• Operations
• Loops
• Conclusion

•Sass

Sass is a CSS preprocessor that uses a syntax similar to CSS but with additional features. Sass allows for the use of variables, mixins, functions, and nested rules, which can greatly simplify and streamline CSS code. Sass can be compiled into standard CSS code using a command-line tool or an app like CodeKit or Prepros.

•Variables

Sass allows you to define variables, which are placeholders for values that you use repeatedly in your stylesheets. You can define a variable using the $ symbol, and then use it throughout your stylesheet. For example:

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: #fff;
}

 

In this example, we define a variable called $primary-color and set it to a blue color. We then use this variable to set the background color of a button element, instead of using the color value directly.

So, instead of hard-coding the hex color value directly into the CSS, we've defined a variable that can be used throughout our stylesheet. This can make it easier to maintain and update our styles, especially if we want to change the color later on.

•Mixins

Mixins allow you to define reusable pieces of code that can be included in your stylesheets using the @include rule. Mixins can take arguments, which allows you to create more flexible and customizable code. For example:

CSS

  
@mixin box-shadow($x, $y, $blur, $color) {
box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(0 0 10px rgba(0,0,0,.2));
}

 

In this example, we define a mixin called box-shadow that takes four parameters: $x, $y, $blur, and $color. The mixin sets the box-shadow property of an element to the values of these parameters.

We then use this mixin to add a box shadow to a .card element. We pass in the values 0, 0, 10px, and rgba(0,0,0,.2) as arguments to the mixin using the @include directive.

When this code is compiled into standard CSS, it will look like this:

CSS

 
.card {
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}

So, instead of writing out the entire box-shadow property every time we want to add a box shadow, we've defined a mixin that we can reuse throughout our stylesheet. This can help us write less code and make our stylesheets more organized and maintainable.

•Functions

Sass provides a number of built-in functions that allow you to manipulate values, such as lighten() and darken() to adjust colors. You can also define your own custom functions using the @function rule. For example:

CSS

 
@function rem($pixels) {
@return ($pixels / 16) + rem;
}

h1 {
  font-size: rem(32);
}

 

In this example, we define a custom function called rem that takes a value in pixels and converts it to a value in rems. We then use this function to set the font size of an h1 element.

•Nested Rules

Sass allows you to nest CSS rules inside one another, which can make your code more organized and easier to read. For example:

  
  nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin: 0 10px;
    }
  }
}

 

In this example, we define a nav element and then nest a ul element inside it. We can then nest an li element inside the ul, and set styles for it that only apply when it's inside the ul element, which can make our code more concise and easier to read.

•Less

Less is another popular CSS preprocessor that also uses a syntax similar to CSS. Like Sass, Less supports variables, mixins, and nested rules, but it also includes features like operations and loops. Less code can be compiled into standard CSS using a command-line tool or an app like WinLess or Koala.

•Variables

Less allows you to define variables using the @ symbol, just like Sass. You can define a variable and then use it throughout your stylesheet. For example:

@primary-color: #007bff;

.button {
  background-color: @primary-color;
  color: #fff;
}


 

In this example, we define a variable called @primary-color and set it to a blue color. We then use this variable to set the background color of a button element, instead of using the color value directly.

•Mixins

Less also allows you to define reusable pieces of code that can be included in your stylesheets using the .() syntax. Mixins can take arguments, just like in Sass. For example:

  
.box-shadow(@x: 0, @y: 0, @blur: 10px, @color: rgba(0,0,0,.2)) {
 box-shadow: @x @y @blur @color;
}

.card {
  .box-shadow();
}


 

In this example, we define a mixin called .box-shadow that takes four arguments: @x, @y, @blur, and @color. We then include this mixin in a .card element, with no arguments, which will use the default values we defined in the mixin.

•Nested Rules

Less allows you to nest CSS rules inside one another, just like Sass. This can make your code more organized and easier to read. For example:

  
  nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline-block;
      margin: 0 10px;
    }
  }
}


 

In this example, we define a nav element and then nest a ul element inside it. We can then nest an li element inside the ul, and set styles for it that only apply when it's inside the ul element, which can make our code more concise and easier to read.

•Operations

Less supports mathematical operations between values. For example:

  
@width: 100px;
@height: @width * 2;

.box {
  width: @width;
  height: @height;
}



 

In this example, we define a variable called @width and set it to 100px. We then define a variable called @height, which is set to twice the value of @width. We use both variables to set the width and height of a .box element.

•Loops

Less allows you to loop through a set of values and generate CSS rules based on those values. For example:

  
 @colors: red, green, blue;

.generate-color-classes() {
  .loop(@index) when (@index > 0) {
    .color-@{index} {
      background-color: extract(@colors, @index);
    }
    .loop(@index - 1);
  }
  .loop(length(@colors));
}

.generate-color-classes();



 

In this example, we define a variable called @colors that contains a list of colors. We then define a mixin called .generate-color-classes that loops through the list of colors and generates CSS classes for each color, with a different background color. We call this mixin at the end of our stylesheet, which will generate the CSS classes.

•Conclusion

Using a CSS preprocessor like Sass or Less can greatly enhance the efficiency and maintainability of CSS code. By using variables, mixins, functions, and other features, developers can write cleaner and more modular CSS code that is easier to update and maintain. Whether you choose Sass or Less, or another CSS preprocessor altogether, it's important to explore and experiment with the various tools available to improve your CSS workflow.