转自：&的博客/wangpenghui522/p/5467560.html&
高级程度排名：
SASS&(变量+混入+继承+函数+条件判断+嵌套+for+if+工具库Compass)&&&&SCSS&(变量+混入+继承+函数+条件判断)&&&LESS&(嵌套+变量+混入)&&&CSS&(纯静态)
一. Sass/Scss、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Sass与Scss是什么关系?
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. &Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。
二. Sass/Scss与Less区别
1.编译环境不一样
Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
4 width:@m;
5 height:200
6 bordeR:1px solid #ff0;
9 /** 最终效果 **/
11 width: 200
12 height: 200
13 bordeR: 1px solid #ff0;
15 /* 结论：less有局部和全局变量的概念 */
Less-作用域
@color: #00c; /* 蓝色 */
@color: #c00; /* red */
border: 1px solid @ /* 红色边框 */
border: 1px solid @ /* 蓝色边框 */
Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000}
+++--------------------------------------------------+++
scss-作用域
$color: #00c; /* 蓝色 */
$color: #c00; /* red */
border: 1px solid $ /* 红色边框 */
border: 1px solid $ /* 蓝色边框 */
Sass-作用域编译后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}
我们可以看出来，less和scss中的变量会随着作用域的变化而不一样（ 有待验证160804 ）。
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
输出样式的风格可以有四种选择，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
/* Sample Sass &if& statement */
@if lightness($color) & 30% {
/* Sample Sass &for& loop */
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}
&5. 引用外部CSS文件
scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.
// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后：
font-size: 17
font-size: 17
font-size: 17
Less引用外部文件和css中的@import没什么差异。
6.Sass和Less的工具库不同
Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。
不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less(目前在研究怎么使用sass160804 haley注)。
阅读(...) 评论()CSS 的预处理程序分别都有哪些优缺点_百度知道温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
生活需要小屁孩的眼睛,大姐姐的心灵和攻城师的逻辑,用好奇心敲出最温润的美丽。
她会更频繁地出没在新浪微博：@witmin
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
Sass1. Intall Ruby2. Intall Sass throught RubyLaunch “Start Command Prompt with Ruby”,Type in “gem install sass”Done.3. Launch Webstorm and create a new projectCreate a “style.scss”. It will display a bar and ask if you want to apply watcher or not. Click “Add watcher”.Need to add the path “D:\Ruby200-x64\bin” in “Environment Variable” before setting the “Watcher” in Webstorm.As the screenshot below:Open the “Edit Watcher” in Webstorm, browse the Program path and select “sass.bat” file. As the screenshot below:&4. Create a .html file. Link to css file which has the same name as the .scss file. After you add some style in .scss files, webstorm will apply the watcher and compile a .css file as a sub file of the .scss immediately. If you launch the live edit view in chrome. You will see the live style now. I feel good to apply the syntax and render the page.&Less1. Install Node.js2. Launch “Node.js command prompt”3. Install Less in Node.js with command “npm install -g less”4. In Webstorm, setup the watcher for less with the program path “C:\Users\millie.lin\AppData\Roaming\npm\lessc.cmd”5. Done. Other steps are almost the same as Sass.
阅读(6400)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_081',
blogTitle:'Webstorm里scss/less实时转换的watcher安装与设置方法',
blogAbstract:'技术贴，备份一下在Webstorm里实现Watcher实时编译Scss或Less的设置方法Sass1. Intall Ruby',
blogTag:'css,scss,sass,webstorm,技术',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:5,
publishTime:0,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'生活需要小屁孩的眼睛,大姐姐的心灵和攻城师的逻辑,用好奇心敲出最温润的美丽。\n\n她会更频繁地出没在新浪微博：@witmin',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}