liveBook · Manning

Sass

As explained in Tiny CSS Projects

Sass is a stylesheet preprocessor language that adds authoring features beyond standard CSS.

Sass is a CSS preprocessor: it adds features for writing styles, then compiles those styles into CSS for the browser. That extra step can make styles easier to write and maintain, but it also makes project setup more involved. section 12.0 section 12.8

To try it on a how-to article, start with HTML and a stylesheet. Choose either a local npm setup or CodePen. In CodePen, set the CSS panel’s preprocessor to SCSS; locally, a Sass watcher can update the CSS file when the SCSS file changes. The HTML links to the compiled CSS, not the SCSS. section 12.1 section 12.1.3 section 12.1.4

Sass offers two ways to write the source stylesheet:

  • Indented syntax uses a .sass file and omits braces and semicolons. section 12.1.2
  • SCSS uses a .scss file. It looks like CSS and accepts valid CSS alongside Sass features. section 12.1.2
Listing 12.2 Sass using SCSS syntax
body {
  margin: 0;
  padding: 20px;
}
 
p {
  line-height: 1.5;
}

Compare this SCSS listing with the familiar shape of a CSS ruleset: it keeps braces, semicolons, selectors, and declarations. section 12.1.2

Check the first compiled stylesheet

The article’s starting SCSS sets the body’s typography and maximum width, plus paragraph line height. Before any Sass-only features are added, the compiled CSS contains essentially the same styles, with a source-map reference appended. In CodePen, use View Compiled CSS to inspect it. section 12.1.4

From there, Sass features include variables, nesting, mixins, @extend, interpolation, loops, debugging, functions, and conditionals. They offer more ways to organize or generate styles, but they can also add complexity. Decide whether a project needs them before taking on the build step. section 12.9 section 12.8

How Tiny CSS Projects covers it

How deep it goes
Explains syntax and setup through a project, surveys several features, and stops short of comprehensive Sass coverage.
Examples
Uses a how-to article, paired syntax listings, starting SCSS, and its compiled CSS output.
What it assumes
Assumes prior plain-CSS styling but offers CodePen as an option when npm is unfamiliar.
What you can do after
Operate/configure it through CodePen or a local watcher, then inspect the CSS generated from SCSS.
How it connects
Connects Sass to CSS custom properties, mixins, nesting, interpolation, loops, and compiled CSS.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

Compare how 2 books explain Sass →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.