sass的简单应用

　sass是一款css的预处理器，有着强大的语法和函数，和less相比，更加友好的变量命名，获得了很多程序员的喜爱。而sass现在支持完整的css3，也是程序员钟爱sass的原因

sass的安装

第一种安装和使用就像这样：

gem install sass

　　如果你使用的是windows操作系统，那么你还必须首先安装ruby

为了运行sass，你可以这样操作

sass input.scss output.css

　　并且你还可以监听磁盘

sass --watch input.scss:output.css

　　非常方便。

安装和使用不再做过多赘述，下面看看用sass的一个小例子

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

　　上面的是sass，看看它是怎样编译的

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

　　是不是感觉很方便，很快捷呢？sass不再像以前使用css那样，而是有一个层级关系，这样更方便程序员思考该怎么样写结构。

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

　　更好的一个例子，我们看这个sass的结构，就知道p标签和div便签是作为id为main元素的后代，并且他们处于同级，一目了然，非常方便

编译后的结果：

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

更多的例子

变量申明

$width: 5em;

#main {
  width: $width;
}

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

　　编译后的结果：

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

　　太酷炫了，有木有。

sass的总得语法和形式和less差不多，如果掌握了less，相信sass肯定会很快掌握的