Sassy Cascading Stylesheets (SCSS)

Sassy Cascading Stylesheets (SCSS) is a superset of CSS that addresses common foot guns and provides syntactic sugar to make CSS easier to organize and manage.

Key features of SCSS

Nested styles

A common cause of defects in CSS is that it does not support style nesting, thus this:

.menu {
	/* ... */
}

.menu ul {
	/* ... */
}

.menu ul li {
	/* ... */
}

Can easily and accidentally become this:

/* Missing the .menu class! */

.menu ul {
	/* ... */
}

.menu ul li {
	/* ... */
}

Or this:

.menu {
	/* ... */
}

.menu ul {
	/* ... */
}

.menu ul li {
	/* ... */
}

.menu {
	/* .. conflicting styles .. */
}

SCSS helps avoid this situation through nested styles, so that to style a <ul> element within a .menu class element, the preferred method is to use nesting:

.menu {
	/* ... */
	ul {
		/* ... */
	}
}

This approach makes the relationship between styles clearer and more compact.

Variables

SCSS supports variables using the $variable-name syntax. For example:

$alert-info-color: green;
$alert-warning-color: yellow;
$alert-error-color: red;

.alert-info: {
	background-color: $alert-info-color;
}
/* ... */

This makes code more semantic and thus easier to understand, plus easier to manage by having only one place to change variable values.

SCSS Resources

Official SCSS Website

Broader Topics Related to Sassy Cascading Stylesheets (SCSS)

Cascading Style Sheets (CSS)

Web Development

Tools and techniques for building websites and web-applications

James's Knowledge Graph