随着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也有服务器端版本。因为篇幅原因，在这里就不做介绍了。有兴趣的同学可以去参考这里。 http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

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常用开发功能 雪碧图与文件合并压缩。请参考笔记二（待更新）