SASS | Sintaxis

SASS admite dos tipos de sintaxis. Cada uno puede usarse de manera diferente para cargar su CSS requerido o incluso la otra sintaxis.

1. SCSS: la sintaxis SCSS utiliza la extensión de archivo .scss . Es bastante similar a CSS. Incluso puede decir que SCSS es un superconjunto de CSS, lo que significa que todo el CSS válido también es SCSS válido. Debido a su similitud con CSS, es la sintaxis SASS más fácil y popular utilizada.

Ejemplo:

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

Esto daría como resultado el siguiente 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. La sintaxis con sangría: esta sintaxis es la sintaxis original de SASS y utiliza .sass como extensión de archivo, por lo que a veces se denomina simplemente SASS. Esta sintaxis tiene todas las mismas características que SCSS, con la única diferencia de que SASS usa sangría en lugar de los corchetes y puntos y comas de SCSS.

Ejemplo:

@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

Esto daría como resultado el siguiente CSS:

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