主要差异
虽然人们经常说 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;
}