A CSS preprocessor is a scripting language that extends CSS.

There are lots of CSS Preprocessor, but most popular among them are:
Less, SASS, Stylus, PostCSS

Comparing Styling Methods in 2020 @css-tricks

Browsers do not understand any of them, so in order to use one, we need to have the corresponding compiler (to CSS).

CSS is difficult to be maintained in large code-bases.

CSS Preprocessors offers advanced features:

Write code quicker.

Write clear-structured code

Use Variable, Conditionals, Loops, Mixins

Yes, CSS is evolving, and the knowledge you'll get from using CSS pre-processors will help you master the new CSS features.

CSS variables are real, now!

What is Sass?

Sass = Syntactically Awesome StyleSheets

Sass = CSS with superpowers

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass supports two syntaxes: scss and indented syntax. But more on that - latter

Sass have different implementations, but the official maintained version is Dart Sass

Sass official page: sass-lang.com

Installation

Variant 1: by VSCode Extension. Please note, that the most popular Live Sass Compiler by Ritwick Dey Extension is not supported from 2018, so it is better to use the fork of Glenn Marks, i.e. search in VSCode for "Live Sass Compiler" by Glenn Marks.

Variant 2: Install Anywhere (Standalone) with npm. If you want to install Sass globally (using the -g option) then there is no matter in which folder you execute the given command

				npm install -g sass
			

Which way to prefer? Next resources will help you:

Is it better to use the Live Sass Compiler (VS Code extension) or to install and run Sass via npm?

Live Sass Compiler - @use causes compilation error

Or shortly: installing Sass by npm guarantees that you'll have the latest Sass version; on the other side using a VSCode Extension is the most easiest way to get started with Sass.

Test it (with VSCode Extension)

Create a simple sass file: style.scss

				$color 	  : #F100FF;
				$bg_color : #5C5454;

				.test{
					color: $color;
					background: $bg_color;
				}
			

Start Sass compiler in watch mode: Command Palette=>Live Sass: Watch Sass

watch mode will make Sass compiler to watch for changes in your Sass file and compile to CSS on each change automatically.

A compiled CSS file style.css should be created in the current folder

Test it (the npm installed version)

Open your terminal and navigate to the folder where your style.scss file lives.

And just compile it into CSS by:

					$ sass sass_demo.scss sass_demo.css
			

The CSS file is generated, along with the Source Map file

If you wander, what is that generated Source Map file, go on and read Sass Source Maps + Chrome = Magic

--watch files

Instead of manually compiling on each change, you can tell sass to --watch your file or directory for changes and to compile automatically on each change

I.e. we can write in our Terminal:

					$ sass --watch sass_demo.scss sass_demo.css
				

--watch folder

SASS can also compile/watch all files in a directory and we can, as well, set the output path.

				├── app
				│  └── scss
				│      └── sass_demo.scss
				├── dist
				│  └── styles
				└── sass_demo.html
			

				$ sass --watch app/scss:dist/styles

				>Compiled app/scss/sass_demo.scss to dist/styles/sass_demo.css.
				>Sass is watching for changes. Press Ctrl-C to stop.
			

Final note on compiling

Of course, there are more automated ways for compiling SASS, like using task runners (Gulp/Grunt/Webpack).

Some useful settings of Live Sass Compiler

			{
				"liveSassCompile.settings.formats": [
					{
						"format": "expanded",
						"extensionName": ".css",
						// / -> denotes relative to the workspace root
						"savePath": "/dist/css",
					},
					{
						"format": "compressed",
						"extensionName": ".min.css",

						// / -> denotes relative to the workspace root
						"savePath": "/dist/css"
					},
				],
				"liveSassCompile.settings.generateMap":false,
			}
		

Reference: vscode-live-sass-compiler docs

Sass: the two syntaxes

There are two syntaxes available for Sass

The indented syntax, or just Sass

files are with extension .sass

SCSS (or Sassy CSS) is the newer version, as of Sass v3.

files are with extension .scss

The indented syntax overview

The indented syntax is the older syntax.

It provides more concise way for writing code

No brackets - just indentation

No semicolon - new line is enough to separate declarations

But it deviates away from CSS.

SCSS overview

The newer syntax is a superset of CSS, i.e each valid CSS is a valid SCSS.

This is the syntax which will be used along this course.

Style rules

In Sass style rules has the same function as in CSS - choose which element to style (with selector) and declare properties with values describing how the element should be styled.

Variables

A variable in Sass begins with $ and its value is assigned like a CSS value to a property. I.e. with the column notation.

				// declare to variables:
				$fg-color: #F100FF;
				$bg-color: #952b2b;

				// and use it, like that:
				.test{
					color: $fg-color;
					background: $bg-color;
				}
			

Sass variables vs CSS variables

Reference: Using CSS custom properties (variables)

Property Declarations

In SASS, a property value can be any literal or expression, which will be evaluated and included in the result.

			$fs-normal:16px;

			.test{
				<!-- string literal value -->
				color: red;
				<!-- expression value -->
				font-size: $fs-normal + 2px;
			}
		

			.test {
				color: red;
				font-size: 18px;
			}
		

Literals

Referencce: literals @sass-lang.com

			// numbers
			$number: 1.23;

			// strings (can be quoted or unquoted)
			$foo:"bar";
			$foo:bar;

			// colors:
			$color:red;
			$color:#F00;
			$color:rgba(255,0,0,0.5);

			// boolean
			$shown:true;
			$shown:false;

			// null:
			$test:null;

			// lists (any expression, separated with spaces or commas )
			$border: 1px solid $color;
			$font: "Helvetica", serif;

			//maps (like dictionary)
			$color_map: (
			  light: #ccc,
			  dark: #000
			);
		

SCSS Operations

Reference: operators @sass-lang.com

			$box_width:200px;
			$box_height:$box_width*2;

			.parent{
				width: $box_width;
				height: $box_height;
				background-color: red;

				div{
					width: $box_width/2;
					height: $box_height/2;
					background-color: blue;
				}
			}
		

			.parent {
				width: 200px;
				height: 400px;
				background-color: red;
			}
			.parent div {
				width: 100px;
				height: 200px;
				background-color: blue;
			}
		

Hidden Declarations

If a declaration’s value is null or an empty unquoted string, Sass won’t compile that declaration to CSS at all.

			$rounded: null;

			.button {
				border: 1px solid #999;
				border-radius: $rounded;
			}
		

			.button {
				border: 1px solid black;
			}
		

Nested Rules

Sass allows CSS rules to be nested, and the inner rule only applies within the outer rule's selector.

			.A{
				/* A declarations */
				.B{
					/* B declarations */
				}
			}
		

			.A{
				/* A declarations */
			}
			.A .B{
				/* B declarations */
			}
		

Parent Selectors: &

We can point to the parent selector using the & symbol. Like in

			a{
				text-decoration: none;
				&:hover{
					text-decoration: underline;
				}
			}
		

			a {
			  text-decoration: none;
			}
			a:hover {
			  text-decoration: underline;
			}
		

Resolving Parent Selectors: &

On deeper nesting, the parent selectors will be fully resolved before replacing the &:

			a{
				text-decoration: none;
				&:hover{
					text-decoration: underline;
					&:after{
						content: ">>";
					}
				}
			}
		

			a {
			  text-decoration: none;
			}
			a:hover {
			  text-decoration: underline;
			}
			a:hover:after {
			  content: ">>";
			}
		

Suffixed Parent Selectors: &

& should be at the beginning of the selector, but it can be followed by a suffix that will be added to the parent selector

			.btn{
				background: gray;
				border-radius: 20%;
				&-alert{
					background: red;
				}
			}
		

			.btn {
			  background: gray;
			  border-radius: 20%;
			}
			.btn-alert {
			  background: red;
			}
		

Nested Properties

The name-spaced properties, like: background-image, background-size, etc. can be economically written is SCSS like:

			.cover{
				background:{
					image:"img1.png";
					size: 100% 100%;
					position: center;
				}
			}
		

			.cover {
			  background-image: "img1.png";
			  background-size: 100% 100%;
			  background-position: center;
			}
		

@-Rules and Directives

@mixin

live demo

Partials

TODO: update for @use (https://sass-lang.com/documentation/at-rules/import), i.e. modules.

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files.

A partial is a Sass file named with a leading underscore, like _variables.scss.

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.

You can include the partial file, with @import "file_name", where file_name is the name of the partial without underscore. You can skip the ".scss" extension

			$box_width:200px;
			$box_height:200px;
		

			@import "global_variables";
		

Examples

See the Pen SCSS demo by Iva Popova (@webdesigncourse) on CodePen.