SCSS (Sassy CSS) #

Sass vs. SCSS #

Syntactically awesome style sheets vs. Sassy CSS

Both Sass and SCSS are CSS preprocessors. Although SCSS was introduced after Sass, it is now more widely recommended due to its full compatibility with standard CSS.

Files #

An SCSS file with a leading underscore is a partial, meaning it does not compile into a standalone CSS file.

_index.scss is reserved for gathering partials.

Comments #

SCSS
// This comment is gone after CSS compilation.

// Multiline
// Comment

/* This comment is still maintained after CSS compilation. */

/*
 * Multiline
 * Comment
 */

Variables #

SCSS variables are scoped to their defining file or block. Declaring an SCSS variable inside a selector, such as :root, makes it local to that block and inaccessible from the outside. To make an SCSS variable global, define it outside of all selectors and import it where needed.

SCSS
$color-primary: green;

html {
  color: $color-primary;
}

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

Interpolation #

#{}

At-Rules #

  • @at-root

  • @mixin

    Creates a reusable set of styles.

  • @forward

    Acts as a bridge between modules. It is primarily used in _index.scss.

  • @use

    Loads a module only once, no matter how often it is imported.

    By convention, omit leading underscores and .scss from paths. For _index.scss, simply use its directory instead.

  • @include

    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