Open In App

SASS Syntax

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 15 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads