16 The CSS Preprocessor Sass and SCSS
A chapter on CSS preprocessors is almost mandatory in a book on CSS these days. You can use a CSS preprocessor to make writing CSS easier, for example, by eliminating repetitive writing. Code handling can also be simplified with a CSS preprocessor. This chapter contains a brief introduction to this topic; for this purpose, I chose Sass as the CSS preprocessor.
It may seem a bit inconvenient at first to pull another technology on top of CSS, which ultimately generates just another CSS file. But we’re talking about CSS preprocessors. Sass is just one of many other CSS preprocessors that are now being used briskly by serious web designers on a daily basis. A preprocessor is used to automate tedious tasks and provide new functionality. A simple example is if, when creating a website with CSS, you assign a red color countless times to various CSS properties because that’s the color a customer wants. However, the customer changes their mind and would rather have a shade of blue, so you have to assign the blue color to all red elements. This is where a CSS preprocessor such as Sass comes into play. Instead of constantly changing repetitive values, you can implement the change at only one central point according to the DRY principle (don’t repeat yourself).
Other well-known representatives of CSS preprocessors are, for example, Less or Stylus. The special case or difference of Sass and SCSS will be explained in the following sections of this chapter. If you compare the CSS preprocessors with each other, you’ll find that many things are pretty similar. I chose Sass because I use it a lot myself, and Sass is probably the CSS preprocessor with the biggest community.
The goal of this chapter is to familiarize you with the basics of Sass. The examples are therefore usually very simple and shorter in nature. But the advantage of using a CSS preprocessor to develop CSS code may not be immediately apparent to you. However, this will change significantly when you use Sass in more extensive projects.
16.1 Sass or SCSS Syntax
Because Sass and SCSS are often mentioned at the same time, it’s beginners in particular who wonder whether these are two different CSS preprocessors. The answer is yes and no because both are Syntactically Awesome Style Sheet (Sass) after all. The difference between the two is that they’re two different grammars. The original syntax was Sass syntax, and the syntax that was introduced afterward was Sassy CSS (SCSS). In this book, I use the newer SCSS syntax, which uses curly brackets and semicolons, unlike the Sass syntax. The following example in Table 16.1 is intended to briefly explain the difference between the two syntaxes without going into too much detail.
|
SCSS Syntax (style.scss) |
Sass Syntax (style.sass) |
|---|---|
|
$but-size: 100%; |
$but-size: 100% |
Table 16.1 Differences between SCSS Syntax and Sass Syntax
The Sass syntax is always a bit shorter because, as already mentioned, it doesn’t use curly brackets and semicolons. In Sass, nesting is done by means of indentation.