Scss 与 Sass 是什么,他们的区别在哪里？

Scss 与 Sass异同
Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：

1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。

2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(😉，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

我们不妨来看看下面两段代码，这样会更加直观，更容易理解。

简单的Sass代码

1 #sidebar
2 width: 30%
3 background-color: #faa

对应的Scss代码

1 #sidebar {
2 width: 30%;
3 background-color: #faa;
4 }

另外，SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子：

1 #sidebar {width: 30%; background-color: #faa}
我们不妨接着再分享几段 Scss 代码

Sass允许选择器嵌套。比如，下面的CSS代码：

1 div {
2 h1 {
3 color:blue;
4 }
5 }

输出的CSS样式为

1 div h1 {
2 color: blue;
3 }

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

1 a {
2 &:hover { color: #0099cc; }
3 }

输出的CSS样式为

1 a:hover {
2 color: #0099cc;
3 }