SASS基本语法是怎么样的？

SASS支持两种语法。每个加载项可以不同地用于加载所需的CSS甚至其他语法。

1. SCSS：SCSS语法使用.scss文件扩展名。它与CSS非常相似。你甚至可以说SCSS是CSS的超集, 这意味着所有有效的CSS也是有效的SCSS。由于它与CSS的相似性, 因此它是最简单且流行的SASS语法。

例子：

@mixin hover($duration) {
   $name: inline-#{unique-id()};
  
   @keyframes #{$name} {
     @content;
   }
    
   animation-name: $name;
   animation-duration: $duration;
   animation-iteration-count: infinite;
}
  
.gfg {
   @include hover( 2 s) {
     from { background-color : green }
     to { background-color : black }
   }
}

这将导致以下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.缩进语法：此语法是SASS原始语法, 它使用.sass因为它是文件扩展名, 因此有时也简称为SASS。这种语法与SCSS具有所有相同的功能, 唯一的区别是SASS使用缩进而不是SCSS的花括号和分号。

例子：

@mixin hover($duration)
   $name: inline-#{unique-id()}
  
   @keyframes #{$name}
     @content
  
   animation-name: $name
   animation-duration: $duration
   animation-iteration-count: infinite
  
.gfg
   @include hover( 2 s)
     from
       background-color : green
     to
       background-color : black

这将导致以下CSS：

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