What Is SCSS?

SCSS (Sassy CSS) is an extended form of CSS that makes writing styles more effective with extra features and flexibility. It is one of the two syntaxes of the Sass (Syntactically Awesome Stylesheets) preprocessor — the newer one.

The main difference between SCSS and the indented Sass syntax is the syntax itself: Sass is shorter and relies on indentation, while SCSS keeps the familiar CSS syntax with braces and semicolons. Any valid CSS file is also valid SCSS, which makes moving to it easy.

Some key features of SCSS:

1. Variables: Store values such as colours, fonts and sizes; this keeps a design consistent and makes changes easy.

   $main-color: #3498db;
   body {
     background-color: $main-color;
   }

2. Nested styles: Nest rules to make the stylesheet easier to follow.

   nav {
     ul {
       margin: 0;
       padding: 0;
       list-style: none;
     }
   
     li {
       display: inline-block;
       margin-right: 10px;
     }
   }

3. Mixins: Group declarations into reusable mixins.

   @mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     border-radius: $radius;
   }
   
   .box {
     @include border-radius(10px);
   }

4. Import: Split styles into files and combine them; the @import rule brings other SCSS files in.

   @import 'reset';
   @import 'base';
   @import 'layout';

These features make CSS more modular, readable and maintainable. Browsers cannot read SCSS directly, so it is compiled to CSS with a preprocessor (for example Dart Sass) before use.

Note: Since Dart Sass 1.80, @import is deprecated. New projects should connect files with @use and @forward instead — for example @use "base";.