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(2s) {
    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(2s)
    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;
  }
}