SASS | Syntax

SASS supports two types of syntax. Each one can be differently used to load your required CSS or even the other syntax.

1. SCSS: The SCSS syntax uses .scss file extension. It is quite similar to CSS. You can even say that SCSS is a superset of CSS, meaning that all the valid CSS is also valid SCSS too. Due to its similarity with CSS, it is the easiest and popular SASS syntax used.

Example:

@mixin hover($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.gfg {
  @include hover(2s) {
    from { background-color: green }
    to { background-color: black }
  }
}

This would result the following CSS:

.gfg {
  animation-name: inline-uf1ia36;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uf1ia36 {
  from {
    background-color: green;
  }
  to {
    background-color: black;
  }
}

2. The indented Syntax: This syntax is SASS original syntax and it uses .sass as it’s a file extension, and because of this it is sometimes simply called SASS. This syntax has all the same features as SCSS, the only difference being that SASS uses indentation instead of SCSS’s curly brackets and semicolons.

Example:

@mixin hover($duration)
  $name: inline-#{unique-id()}

  @keyframes #{$name}
    @content

  animation-name: $name
  animation-duration: $duration
  animation-iteration-count: infinite

.gfg
  @include hover(2s)
    from
      background-color: green
    to
      background-color: black

This would result the following CSS:

.gfg {
  animation-name: inline-uf1ia36;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-uf1ia36 {
  from {
    background-color: green;
  }
  to {
    background-color: black;
  }
}