CSS Preprocessors: A Guide to Efficient Stylesheets

CSS Preprocessors

Cascading style sheets give web developers the ability to organize basic html content in a beautiful and robust way. On it’s own, CSS has many powerful features, however it can often be inefficient without the aide of third party tools, which can also add useful functionality.

CSS preprocessors give web developers the ability to use awesome, traditionally-unsupported features in your stylesheets, without disrupting browser compatibility and code organization. The most widely used CSS preprocessors are LESS, Sass, and Stylus.

We’ve compiled an in-depth analysis of the most sought-after of these features.


Sass and LESS are more or less syntactically identical to standard CSS. The only difference here is that both Sass and LESS have their own file extensions – .scss and .less.

Stylus is a little more syntactically distinct than Sass and LESS from standard CSS. Stylus accepts both the standard CSS syntax, and variations of CSS syntax where brackets, colons, and semicolons are all optional.

/* Stylus Syntax */

	font: 12px Helvetica, Arial, sans-serif
  background-color: #ffffff
	color: #666

	color: gray-highlight
	height: 333px
	background-color: white
	border: 1px solid light-gray
	box-shadow: 0 1px 2px rgba(0,0,0,.1)
	position: absolute
	top: 0
	right: 0
	bottom: 0
	left: 0



Variables are among the features that make CSS preprocessors so powerful. A variable can be declared and used anywhere in the CSS stylesheet, and can possess any value that that is usable by standard CSS.

Sass variables are prepended with the dolar-sign symbol and separated with a semicolon.

/* SCSS Variables */
$font-stack: open-sans, Arial, sans-serif;
$base-font: 62.5%; 
$page-bg: #71D4B7;
$code-top: #E8ECEF;
$code-text: #BAC1C9;

LESS variables function in the same way that Sass variables do, except they are prepended with the “@” symbol.

/* LESS Variables */
@font-stack: open-sans, Arial, sans-serif;
@base-font: 62.5%; 
@page-bg: #71D4B7;
@code-top: #E8ECEF;
@code-text: #BAC1C9;

Stylus variables also function in the same way as Sass and LESS variables, however in typical Stylus fashion, the semi-colons and prepending symbols are completely optional.

/* Stylus Variables */
font-stack = open-sans, Arial, sans-serif
base-font = 62.5%
page-bg = #71D4B7
code-top = #E8ECEF
code-text = #BAC1C9



Mixins allow you to reuse element properties throughout the stylesheet in such a way that you don’t need to define them in every location where the same property is used. Consider the following code sample:

/* Stylus Mixin */
  box-sizing border-box
  position relative
  display block
  padding 10px

/* SCSS Mixin */
@mixin item() {
  box-sizing: border-box;
  position: relative;
  display: block;
  padding: 10px;
.other-class {

/* LESS Mixin */
.mixin {
  box-sizing: border-box;
  position: relative;
  display: block;
  padding: 10px;
.other-class {


CSS preprocessors allow you to nest multiple elements within the same parent in the stylesheet in a much more elegant and simple way. Syntactically, Sass, LESS, and Stylus all have the same way of employing nested elements.

/* Stylus Nesting */
  position relative
      position absolute
      top 0
      left 0

/* SCSS Nesting */
.parent-class {
  position: relative;
  .child-class {
    position: absolute;
    top: 0;
    left: 0;

/* LESS Nesting */
.parent-class {
  position: relative;
  .child-class {
    position: absolute;
    top: 0;
    left: 0;


Inheritance allows you to inject the properties of one CSS selector into another selector. In Sass and Stylus, the “@extend” command is used to accomplish this task.

LESS does not offer true support for this functionality. Instead, in the compiled CSS, the properties are repeated in each separate selector, resulting in excess code.

/* @extend in Stylus */
		padding 10px
		border 1px solid #eee
		@extend .message
		color #E2E21E
/* @extend in SCSS */
.message {
		padding: 10px;
		border: 1px solid #eee;
.warning {
		@extend .message;


Traditionally, importing one CSS file into another is considered to have a detrimental effect on the overall performance of your site, due to the multiple HTTP requests that must be made to do so at page load.

When using a CSS preprocessor, however, the imported information is actually included in the compiled CSS stylesheet. This can make the task of organizing your CSS much more straightforward, as you can divide it up among different files without worrying about additional lag at load time. Sass, LESS, and Stylus all utilize the same syntax for importing files.

/* SCSS Importing */
@import "path/filename/_partial.scss";

/* LESS Importing */
@import (less) "path/filename/_partial.less";

/* Stylus Importing */
@import 'path/filename/_partial.styl'

Color Functions

Color functions are pre-built functions that give you the ability to transform an existing color value in a very precise way. Using color functions, you are able to give an element a precise variation of the color properties that are already stored in a variable. Some notable color functions include darken, lighten, saturate, grayscale, invert, and more.

Sass, LESS, and Stylus are all able to utilize color functions in more or less the same way. For a comprehensive list of available color functions, check out the Sass, LESS, and Stylus documentation, respectively.

Sass documentation:
LESS documentation:
Stylus documentation:

Math Operations

CSS preprocessors enable you to do math, which can be quite useful when defining borders or element parameters. Here’s an example of how math operations work in Sass, LESS, and Stylus:

/* SCSS Math */
@function average-calc($some-number, $another-number){
@return (($some-number + $another-number) / 2);

/* LESS Math */
.average(@x, @y) {
  @average: ((@x + @y) / 2);

/* Stylus Math */
 avg(1 2 3)

Error Reporting

Without a preprocessor, it can be extremely cumbersome to find the source of an error in your CSS. For projects that span hundreds of lines of CSS, trying to find the location of an error can take hours of commenting out entire blocks of code. CSS preprocessors make this task nearly effortless. In addition to reporting errors, CSS preprocessors show you how, and sometimes why, the error occurred.

Have a Question, Or Working On a Project?

Book an Appointment Now or Email Us