SCSS #

Sass vs. SCSS #

Syntactically awesome style sheets vs. Sassy Cascading Style Sheets

Sass and SCSS are CSS preprocessors. While SCSS was introduced after Sass, it is now more widely recommended because its syntax is fully compatible with standard CSS.

Files #

An SCSS file with a leading underscore is a partial, meaning it is not compiled to a standalone CSS file.

The _index.scss file is a reserved file to gather partials.

Comments #

SCSS
//One-Line Comment

/*One-Line Comment*/

/*
Multi-Line
Comment
*/

Variables #

SCSS variables are scoped to the file or block where they are defined. Therefore, a SCSS variable in the :root selector is treated as local and cannot be accessed by other selectors or files. To achieve global-like behavior, define the variable outside of any selector and import it in other files.

SCSS
$color-primary: green;

html {
  color: $color-primary;
}

p {
  $color-second: pink;
  color: $color-second;
}

Interpolation #

#{}

At-Rules #

  • @at-root

  • @mixin

    The @mixin at-rule creates a reusable set of styles.

  • @forward

    The @forward at-rule acts as an intermediate bridge between an imported module and an importing file. It is primarily used in the _index.scss file.

  • @use

    The @use at-rule loads a module only once, regardless of how many times it is referenced.

    By convention, a leading underscore and .scss extension should be omitted from a path. Additionally, when importing the _index.scss file, only its directory name should be referenced.

  • @include

    The @include at-rule applies a mixin to a selector.

  • @if, @else
  • @each

  • @for

    SCSS
    //1, 2, 3
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width: 20px * $i;
  }
}

//1, 2
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width: 20px * $i;
  }
}
  • @while