Sass 和 SCSS 有什么区别?
Sass与Scss不同点
SCSS
是 Sass 3 引入新的语法
,其语法
完全兼容 CSS3
,并且继承了 Sass 的强大功能
。
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点
文件扩展名不同
,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名- 语法书写方式不同,
Sass
是以严格的缩进式语法规则
来书写,不带大括号和分号,而SCSS 的语法书写
和我们的CSS 语法书写
方式非常类似。
Sass语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
Scss语法
$font-stark Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
两个编辑出来的css都一样
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作
。
也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、parent references 和 指令都是一致的。
谢谢你阅读到了最后
期待你,点赞、评论、交流