A CSS preprocessor extends stylesheet authoring with additional functionality, then transforms its own source syntax into CSS for the browser. Preprocessors aim to make styles easier to read and maintain, but they add a build step. section 1.1.2 section 12.0
Common choices and practical considerations include:
- Sass, Less, and Stylus extend existing CSS functionality with their own syntaxes. section 12.0
- Most implementations preprocess styles before serving the resulting CSS to the browser. section 12.0
- Choose based on required functionality, team knowledge, and framework support, while accounting for the changed build-and-deploy process. section 12.8
Style a how-to article with Sass
Start with the article’s HTML and an SCSS stylesheet. Run Sass through npm, or use CodePen by placing the HTML in the HTML panel, copying the starting SCSS into the CSS panel, and selecting SCSS as the CSS preprocessor. The resulting CSS styles the page in the browser. section 12.1 section 12.1.3
Figure 12.1 Preprocessor sentiment (data source http://mng.bz/8ry2)
Compare preprocessor sentiment data when considering Sass alongside other preprocessor choices. section 12.0
