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
Broader Topics Related to Sassy Cascading Stylesheets (SCSS)
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
Web Development
Tools and techniques for building websites and web-applications