扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍sass与scss之间有什么差异,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
在平乐等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站建设、成都网站制作 网站设计制作按需网站设计,公司网站建设,企业网站建设,品牌网站设计,成都全网营销推广,成都外贸网站建设公司,平乐网站建设费用合理。sass和scss是CSS预处理器Sass提供的两种不同的语法,两者相似并且都做同样的事情,但是以不同的风格书写。SCSS是最新的,被认为比Sass更好。
下面我们先来了解一下CSS预处理器Sass提供的两种不同的语法sass和scss的相关知识。
sass,也称为缩进语法,类似于Ruby的编程语言。
它是来自另一个名为Haml的预处理器,受Haml的简洁启发,是由Ruby开发人员设计和编写的,因此,Sass样式表使用类似Ruby的语法。没
sass适用于那些喜欢与CSS相似的简洁性的人。它使用行的缩进来指定块,而不是括号和分号,因此有括号,没有分号和严格的缩进。sass语法中的文件使用扩展名.sass。
例:
// Variable !primary-color= hotpink // Mixin =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius.my-element color= !primary-color width= 100% overflow= hidden.my-other-element +border-radius(5px)
正如我们所看到的,与常规CSS相比,这是一个相当大的变化!变量标志是“!”不“$”,分配符号“=”,而不是“:”,这样有点奇怪!
但这是Sass在2010年5月3.0版到来之前的样子,之后Sassy CSS引入了一种名为scss的全新语法。这种语法旨在通过引入CSS友好语法来缩小Sass和CSS之间的差距。
scss,类似与CSS的语法,完全符合CSS标准,
// Variable $primary-color: hotpink; // Mixin @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .my-element { color: $primary-color; width: 100%; overflow: hidden; } .my-other-element { @include border-radius(5px); }
scss绝对比sass更接近CSS。
scss和sass之间的区别
sass语法类似于rubby,它没有括号的用法,没有严格的缩进,没有分号;变量符号是“!”而不是“$”,赋值符号是“=”而不是“:”。
less语法类似于CSS,需要使用大括号,使用分号;变量符号是“$”,赋值符号是“:”。
以上是sass与scss之间有什么差异的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流