本文摘自PHP中文网,作者青灯夜游,侵删。
sass和scss是CSS预处理器Sass提供的两种不同的语法,两者相似并且都做同样的事情,但是以不同的风格书写。SCSS是最新的,被认为比Sass更好。下面我们先来了解一下CSS预处理器Sass提供的两种不同的语法sass和scss的相关知识。
sass,也称为缩进语法,类似于Ruby的编程语言。
它是来自另一个名为Haml的预处理器,受Haml的简洁启发,是由Ruby开发人员设计和编写的,因此,Sass样式表使用类似Ruby的语法。没
sass适用于那些喜欢与CSS相似的简洁性的人。它使用行的缩进来指定块,而不是括号和分号,因此有括号,没有分号和严格的缩进。sass语法中的文件使用扩展名.sass。
例:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
正如我们所看到的,与常规CSS相比,这是一个相当大的变化!变量标志是“!”不“$”,分配符号“=”,而不是“:”,这样有点奇怪!
但这是Sass在2010年5月3.0版到来之前的样子,之后Sassy CSS引入了一种名为scss的全新语法。这种语法旨在通过引入CSS友好语法来缩小Sass和CSS之间的差距。
scss,类似与CSS的语法,完全符合CSS标准,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
scss绝对比sass更接近CSS。
scss和sass之间的区别
sass语法类似于rubby,它没有括号的用法,没有严格的缩进,没有分号;变量符号是“!”而不是“$”,赋值符号是“=”而不是“:”。
less语法类似于CSS,需要使用大括号,使用分号;变量符号是“$”,赋值符号是“:”。
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
以上就是sass与scss之间的区别是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《sass》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者