You probably have noticed in some of the examples presented so far in the CSS chapters that some declarations are repeated between rules. Figure 22.1 shows an example in which the color:yellow and border: thick dotted yellow declarations in the first rule are repeated in the second rule. This is not efficient.
Most stylesheet languages that offer ways of enhancing CSS are designed to address this issue as well as others. They are able to do this by letting you use features that are not supported yet in CSS, such as variables, nesting, and mixins (which allow the grouping of declarations for reuse). They are commonly referred to as CSS preprocessors and the most popular ones include LESS, Stylus, and SASS (Syntactically Awesome Style Sheets) or SCSS, which is version 3 of SASS. These tools are essentially scripting languages that extend CSS and allow the stylesheet that is created to be compiled into regular CSS that the browser understands. In SCSS, for example, the example in Figure 22.1 can be written as in Figure 22.2 in which the style defined by the .warning{} rule is used in the .important-warning{} rule, which also applies the font-weight:bold declaration.
The sites for CSS preprocessors, some of which are provided at the end of this chapter, usually tell you how to install and use them. A quick search should also provide tutorials. The advantages of using CSS preprocessors include:
- Producing cleaner codes because they minimize repetitions.
- Allowing the use of variables that allow long declarations to be represented with a variable that can then be used repeatedly throughout a stylesheet.
- Allowing code snippets and libraries to be shared through importing them.
- Providing functions that allow you to do things on the fly by specifying conditions, such as “if this, then do that”.
- Producing CSS codes that are compatible across different browsers.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.