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的花括号和分号。
【SASS基本语法是怎么样的（）】例子：
@mixin hover($duration)
$name: inline-#{unique-id()}@keyframes #{$name}
@contentanimation-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;
}
}推荐阅读
- 如何找出在未排序数组中出现奇数的两个数字（）
- 如何实现Strassen的矩阵乘法算法（）
- 深入浅出（Linux文件层次结构详细指南和教程）
- 算法（如何实现求n范围内出现的最大整数-S2）
- Python中的hash()方法怎么使用（）
- JavaScript如何用多个其他字符串替换多个字符串（）
- 本图文详细教程教你win10怎样设置远程桌面连接
- 本图文详细教程教你处理win10开机慢
- 本图文详细教程教你运用windows10快捷键