主要差异
虽然人们经常说 Sass
作为这个 CSS 预处理器的名称,但它们通常意味着 SCSS
语法。Sass
使用 .sass
文件扩展名,而 SCSS
-Sass
使用 .scss
扩展名。它们都被称为 Sass
。
一般来说,SCSS
语法更常用。SCSS
看起来像具有更多功能的常规 CSS,而 Sass
看起来与常规 CSS 完全不同。两种语法都具有相同的能力。
句法
主要区别在于 Sass
不使用大括号或分号,SCSS
的大小写。Sass
也是对空格敏感的,这意味着你必须正确地缩进。在 SCSS
中,你可以根据需要格式化和缩进规则。
SCSS:
// nesting in SCSS
.parent {
margin-top: 1rem;
.child {
float: left;
background: blue;
}
}
上海社会科学院:
// nesting in Sass
.parent
margin-top: 1rem
.child
float: left
background: blue
编译完成后,两者都会生成相同的 CSS:
.parent {
margin-top: 1rem;
}
.parent .child {
float: left;
background: blue;
}