naro

您所在的位置:首页 > 解决方案 > 前端技术 > 正文
导言:简单来说Scss是Sass的升级,兼容css3而且更贴近css的写法,他与Sass最大的区别是可以使用{ },对空白符号不敏感。

Scss 是 Sass 3 引入新的语法,其语法完全兼容 Css3,并且继承了 Sass 的强大功能。也就是说,任何标准的 Css3 样式表都是具有相同语义的有效的 Scss 文件。另外,Scss 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法。


由于 Scss 是 Css 的扩展,因此,所有在 Css 中正常工作的代码也能在 Scss 中正常工作。也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 Scss。大部分扩展,例如变量、parent references 和 指令都是一致的;唯一不同的是,Scss 需要使用分号和花括号而不是换行和缩进。 例如,以下这段简单的 Sass 代码:

#sidebar
  width: 30%
  background-color: #faa

只需添加花括号和分号就能转换为 SCSS 语法:

#sidebar {
  width: 30%;
  background-color: #faa;
}

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

#sidebar {width: 30%; background-color: #faa}