Sass (Syntactically Awesome StyleSheets) 是具有语法改进功能的CSS预处理器。程序将处理高级语法的样式表,并将其转换为常规CSS样式表。但是,它并未扩展CSS标准本身。
区别在于UI。
在文本外部之下,它们是相同的,都是Sass预处理程序的一部分。这就是Sass和SCSS文件可以相互导入的原因。实际上,Sass具有四个语法解析器:SCSS,Sass,CSS和Less。所有这些将不同的语法转换为抽象语法树,然后通过Sass-convert工具将其进一步处理为CSS输出或至其他格式之一。
- 较新的版本:SCSS(Sassy CSS)
- 还有一个较旧的原始版本:是original Sass,也称为Sass。
对于SCSS和Sass之间的区别,Sass文档页面上的此文本应回答以下问题:
Sass有两种语法。第一个被称为SCSS(Sassy CSS),在本参考文献中一直使用,它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了此语法。使用此语法的文件扩展名为.scss。
第二种或更旧的语法(称为缩进语法(有时也称为“Sass”))提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套,并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass。
SCSS和original Sass之间语法区别如下:
SCSS:
- 语法类似于CSS(以至于每个常规有效的CSS3也是有效的SCSS,但是显然不会发生相反方向的关系)
- 使用大括号
{}
- 使用分号
;
- 分配标志为
:
- 使用
@mixin
指令创建一个mixin - 在
@include
指令之后使用mixin - 文件扩展名为
.scss
original Sass:
- 语法类似于Ruby
- 没有大括号
- 没有严格的缩进
- 没有分号
- 分配符号
=
代替了:
- 使用
=
符号创建mixin - 在
+
符号后使用mixin - 文件扩展名为
.sass