随着Sass与Less的使用越来越多，相比越来越多的前端攻城师都体会到它们的优越性。前端由于一部分工作都是在Html,Css中的编码进行的。好的工具在开发的过程中对效率值的贡献尤为重要。使用Sass有一段时间。在这里也做一个分享。让更多需要的人快乐的编码。
Sass,Less,Scss 都是一些什么东西？
简单的理解来说，它们都属于对原有CSS的扩展。能够更加方便的书写样式规则，强化了Css原有的功能。Sass,Scss 都是来自同一个妈。
Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 “SCSS”( 时髦的css（SassyCSS）),它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。
基本语法参考：
而Less比较特殊，功能大体上差不多。在前端导入less.js也能在客户端解析link中的.less文件。基于Dom解析与渲染速度，个人不太赞同这种做法。Less也有服务器端版本。因为篇幅原因，在这里就不做介绍了。有兴趣的同学可以去参考这里。Sass 新语法中添加了很多很有意思的东西，变量、混合、嵌套、样式继承等。辐射到周边的Compass应用能够对生成的样式表文件进行压缩、合并，减小服务器带宽、加速界面响应速度。通过几个简单的例子，介绍一下这些非常实用的功能。
- 嵌套
/* 生成代码 */ nav ul{ margin: 0; padding: 0; list-style: none; } nav li{ display: inline-block; } /* SCSS语法 */ nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } } - 变量定义
$blue : #1875e7; div { color : $blue; } - 混合
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } - 样式继承
.message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; }
进阶功能介绍，Css常用开发功能 雪碧图与文件合并压缩。请参考笔记二（待更新）