CSS development with Sass: more efficient & faster

The more extensive a website project is, the longer and more confusing the CSS files become. So before you want to change something in the appearance, you first have to fight through countless lines of code to find the right place. Errors creep in, values cannot be reused, passages repeat themselves. As a CSS user, you wistfully look at other (programming) languages, which have useful functions like variables and so on.

CSS Preprocessors

Fortunately, there is a solution to this problem in the form of CSS preprocessors. The name already reveals that these are used at the beginning of the workflow. From slim files, in which "variables", "functions" and "mixins" can be used, the finished CSS files are created. The best known representatives are currently Sass, LESS and Stylus. Which of these preprocessors is used depends, among other things, on the respective project and your own preferences. In this article we would like to take a closer look at Sass, which we also use ourselves for the creation of (WordPress) websites.

Sass (Syntactically Awesome Stylesheets)

By its own account, Sass is "the most mature, stable, and powerful professional grade CSS extension language in the world." It was released in 2007 and was developed by Hampton Catlin. On the official website you can find many examples and a detailed documentation: sass-lang.com

The core functions and thus basis of Sass are:

• Variables (Variables)
• Nesting
• Import
• Mixins (recurring functions or templates)
• Extend / Inheritance (Extension / Inheritance)
• Operators (Operators)

You can learn more about the individual functions below.

Variables

Who hasn't experienced this: certain values such as HEX codes are used across pages, but have to be retyped every time. If many different colors are used, it is often not immediately obvious which snippet should be copied. This can be remedied by variables to which you simply assign the desired values. These can then be reused at any point.

Example for variables (SCSS)

$font-family: 'Roboto', sans-serif;
$font-color: #111;

body {
   font: $font-family;
   color: $font-color;
}

This code is converted to:

body {
   font: 'Roboto', sans-serif;
   color: #111;
}

Nesting

Unlike HTML, CSS has no nesting capability. Sass, on the other hand, does, and this not only saves work but also promotes clarity.

Example for Nesting (SCSS)

.highlight {
   h1 {
      color: yellow;
   }

   a {
      text-decoration: underline;
   }

   p {
      font-weight: bold;
      font-size: 1.5rem;
   }
}

This code is converted to:

.highlight h1 {
   color: yellow;
}

.highlight a {
   text-decoration: underline;
}

.highlight p {
   font-weight: bold;
   font-size: 1.5rem;
}

Import

CSS already offers an import function, but it only requests another CSS file via HTTP. With Sass, on the other hand, multiple files can be merged into a single one.

Example of import using style.scss and _font.scss (SCSS)

// style.scss

body {
   background-color: #eee;
}

@import 'font';

footer {
   display: block;
}

// _font.scss

h1 {
   font-size: 2rem;
   color: #aaa;
}

These two separate SCSS files are combined and the following code is obtained:

body {
   background-color: #eee;
}

h1 {
   font-size: 2rem;
   color: #aaa;
}

footer {
   display: block;
}

It is recommended to work with a reasonable number of such import files for larger projects, so that the overview can be maintained. Another advantage is that in this way individual modules can also be used in another project. It should be noted that the names of the SCSS files to be imported must begin with an underscore.

Mixins

Recurring functions and templates, called mixins, are another useful extension that makes it easier for you to work with CSS files. Once you create a template, you can use it as often as you like throughout your project.

Mixins example (SCSS)

@mixin border-radius($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   border-radius: $radius;
}

.button {
   @include border-radius(20px);
}

This code is interpreted as follows:

.button {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   border-radius: 20px;
}

Extend / Inheritance

Another way to save superfluous code. Existing CSS selectors are simply extended by placeholders.

Example for Extend / Inheritance (SCSS)

%meldung {
   border: 2px dotted #000;
   padding: 5px 10px;
   font-weight: 800;
}

.message {
   @extend 1TP2Message;
}

.success {
   @extend 1TP2Message;
   color: green;
}

.error {
   @extend 1TP2Message;
   color: red;
}

.warning {
   @extend 1TP2Message;
   color: yellow;
}

This code is converted to:

.message, .success, .error, .warning {
   border: 2px dotted #000;
   padding: 5px 10px;
   font-weight: 800;
}

.success {
   color: green;
}

.error {
   color: red;
}

.warning {
   color: yellow;
}

Operators

From time to time it is necessary to make mathematical calculations in CSS. Sass provides the necessary operators for this.

Example for Operators (SCSS)

.main {
   width: 800px / 960px * 100%;
}

This then becomes:

.main {
   width: 83.33333%;
}

How do I get my finished CSS file now?

For this you need a suitable compiler. We currently use Prepros for Windows, but there are also numerous other representatives such as CodeKit (Mac) and Compass (Windows + Mac).

[Update: since 2017 there is now the possibility to use variables without preprocessor, see also CSS Custom Properties; we still recommend the use of preprocessors like Sass or LESS, because variables are not the only feature].