程序地带

Less/Sass/Scss的区别


一. Sass/Scss、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行 (借助 Node.js)。Sass与Scss是什么关系? Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。
二. Sass/Scss与Less区别?

Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。


编译环境不一样


Sass的安装需要Ruby环境,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放到项目中,也有 Less.app、SimpleLess、CodeKit.app这样的工具,也有在线编译地址。 注:两种均可以用IDE编辑器进行编译,例如:应用Hbulilder等


Less与Sass处理机制不同:

Less是通过客户端处理的,Sass是通过服务端处理,相比较之下Less解析会比Sass慢一点。


变量符不一同

Less是@,而Sass是$,而且变量的作用域也不一样。


Sass没有局部变量,满足就近原则。Less中{}内定义的变量为局部变量。


Less没有输出设置,Sass提供4中输出选项

输出样式的风格可以有四种选择,默认为nested


nested:嵌套缩进的css代码 expanded:展开的多行css代码 compact:简洁格式的css代码 compressed:压缩后的css代码


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Menqq/article/details/112689377

随机推荐

cron服务

cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业。servicecrondstart//启动服务servicecrondstop//关闭服务servicecr...

小七驿站 阅读(751)

Python 删除List元素的三种方法remove、pop、del

在Python中,我们会遇到错误的list元素,因此我们要删除。本文小编主要向大家介绍Python中删除List元素的三种方法remove、pop和del。内容如下...

python学习网 阅读(672)

如何从小白成长为 Apache Committer?

我前面写过一系列关于参与开源项目和社区的文章,今天的这篇文章转载自ApacheFlink的 Committer云邪的公众号,现身说法,为我们讲述如何成长为一名...

chainhou 阅读(299)

css获取同类名下的第二个开始

csscss获取同类名下的第二个开始代码如下.first-box:nth-of-type(n+2){margin:0auto;margin-top:30px;}...

南康彭于晏 阅读(435)

【用python实现ping功能】

#!/usr/bin/python#!coding:utf-8importtimeimportstructimportsocketimportselectimportsysdefchesksum(da...

AA8j 阅读(728)