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 most popular SASS syntax used. 

Example: This example shows the syntax of SASS.

css

@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 in 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: This example shows the syntax of SASS. 

css

@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 in 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;
    }
}