less，sass，stylus配置和应用教程及三者比较

       开启浏览器调试

       谷歌浏览器调试

          F12打开调试面板，点击调试面板右上角的齿轮图标打开设置，在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS。

f12打开调试面板，就可以看到原先右边的css文件变成了我们现在的less文件.如下图

点击less文件，会跳到source里面的less源文件，现在可以在里面进行修改，修改完成后可以右键选择save或save as命令，然后替换我们本地的less源文件，刷新chrome就可以看到变化（注意，解析样式需要一定时间）。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。

注意事项：切记项目文件名不能叫less文件夹，否则的话 编译不会生成map文件，也就是说无法定位到单独的less文件了。如下：

 Sass

    1. 定义：

        Sass也是一种css预处理语言，语法也和Less类似，所以也不多说。

    2. 配置教程(如何使用)。

        Sass安装：

         因为Sass依赖于ruby环境，所以装sass之前要先安装ruby，先到官网下载个ruby，地址：http://rubyinstaller.org/downloads 我下载的是Ruby 2.0.0-p481 (x64)

        Ruby安装：

           在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。如下：

    Sass安装：

        安装完ruby后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby。如下：

然后直接在命令行中输入如下命令：

gem install sass

最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。

  淘宝的RubyGems镜像安装sass安装方法：

      由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，

然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了。

出现如下信息，表示安装成功了！

下面我们可以查看下Sass版本的命令如下：

你也可以运行帮助命令行来查看你需要的命令

Sass基本语法介绍：

   1.   文件后缀名

         sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。如下图：

    2.   变量

        sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

      普通变量

      定义之后可以在全局范围内使用。如下图所示：

  3.  嵌套

      sass可以进行选择器的嵌套，表示层级关系。

如下图所示：

会被编译成如下样式：

     4．导入

         sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import ‘reset.css‘，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

          所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

      如下图演示，其中reset.css是要被导入的文件。

      Reset.css

生成后的css文件如下：

     5.mixin

        sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

        如下：

生成后文件

    6. 扩展/继承

          sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

    7．运算

         sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

   如下：

等等语法，这里列出一些简单的语法，如果想需要更多的学习Sass的话，可以请看Sass教程。地址： http://www.w3cplus.com/sassguide/

   Sass如何编译

      1.  单文件转换命令。

          sass sass.scss sass.css

       比如我项目结构如下：

我们先来看看a.scss文件

body {

    background: #eee;

}

     Reset.css 文件css如下：

       div {color:red;}

     sass.scss 文件代码如下：

     @import "reset.css";

     @import "a";

      p{color:red;}

   我运行test.bat处理命令如下：sass sass.scss sass.css

   即可生成sass.css新文件，如下：

其中sass.css文件代码如下：

@import url(reset.css);

body {

  background: #eee;

}

p {

  color: red;

}

2. 对整个目录进行编译成css文件。

  1. 首先需要安装rb-fsevent （更多学习https://github.com/thibaudgg/rb-fsevent/ ）安装命令如下：

如上 说明已经安装完成。

接着我对上面sass项目下的sass文件进行编译成css文件，比如对上面Sass项目中的css文件夹下面的所有sass文件转换成css文件，如下图所示：

上面的意思是：对sass项目下的css文件所有的Sass文件 编译成css文件。最后编译如下目录结构，如下图：

更多的编译介绍 请看下面网址：

http://www.w3cplus.com/sassguide/compile.html

Sass调式

    sass调试需要开启编译(koala)时输出调试信息和浏览器调试功能，两者缺一不可。

     目前sass的调试分为两种，一种为开启debug-info，一种为开启sourcemap（这个将成为主流）。

如开启的是debug-info，则解析的css文件中会有以@media -sass-debug-info开头的代码，如没有则表明没有开启。

如开启的是sourcemap，则在解析的css文件同目录下生成一个.css.map的后缀名文件。

命令行开启

    两个的命令分别为--debug-info，--sourcemap，开启如下：

和

   koala开启

       koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。 需要选下载安装，下载网址如下：

详情了解网址：http://koala-app.com/index-zh.html

       如下图：点击相应的文件，然后就会出现右边的编译选项，即可选择是否开启source map，debug info

    谷歌浏览器调试

         F12打开调试面板，点击调试面板右上角的齿轮图标打开设置，在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS。

开启--sourcemap编译，f12打开调试面板，就可以看到原先右边的css文件变成了我们现在的scss文件.

点击scss文件，会跳到source里面的scss源文件，现在可以在里面进行修改，修改完成后可以右键选择save或save as命令，然后替换我们本地的scss源文件，刷新chrome就可以看到变化（注意，解析样式需要一定时间）。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。

Stylus

     1.定义：

          Stylus也是一门css预处理语言，可以创建健壮的，动态的，富有表现力的css. 默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。

    2.配置教程(如何使用)。

          Stylus也是基于nodejs的，如果没有安装nodejs，请先安装nodejs，可以到这个网址里面下载（http://nodejs.org/#download ），安装完后node自带了NPM(node包管理器)。

       然后，在终端命令下安装stylus包，如下代码：npm install stylus

如上，说明已经安装成功了！

Stylus基本语法介绍：

   一: 变量

         我们可以指定表达式为变量，然后在我们的样式中贯穿使用：我们这样如下写：

第一种写法：
font-size = 14px
body
  font font-size Arial, sans-seri
编译成为如下这样：
body {
  font: 14px Arial, sans-serif;
}
第二种写法：
变量可以组成一个表达式列表 如下
font-size = 14px
font = font-size "Lucida Grande", Arial
body
  font font sans-serif
编译成为如下这样：
body {
  font: 14px "Lucida Grande", Arial sans-serif;
}
标示符(变量名，函数等)，也可能包括$字符，如下：
$font-size = 14px
body {
  font: $font-size sans-serif;
}

    二：mixin(混入)

          例如，下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用。

当border-radius()选择器中调用时候，属性会被扩展并复制在选择器中。

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius(5px)
会编译成如下代码：
form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
使用混合书写，你可以完全忽略括号。
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius 5px
也可以编译成上面的一样。

还可以这样写：
/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  error();/*直接调用error mixins*/
}
.login-error {
  error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}
会编译成如下代码：
/*声明一个Mixin叫作“error”*/
.generic-error {
  border: 2px solid #f00;
  color: #f00; /*直接调用error mixins*/
}
.login-error {
  border: 5px solid #f00;
  color: #f00; /*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

     三：嵌套

          CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。

如下代码：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}
会编译成如下代码：
section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982c1;
}
section nav a:hover {
  text-decoration: underline;
}

   4. 继承

       Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：

如下代码：

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}
他们会编译成如下代码：
.block,
p,
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
}
p { /*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,
ol { /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

     5. 方法(function)

         Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致；却可以返回值。

         返回值

        很简单的例子，两数值相加的方法.

add(a, b)
      a + b
    body 
      padding add(10px, 5)
    会编译成如下代码：
    body {
              padding: 15px;
    }
变量函数
我们可以把函数当作变量传递到新的函数中。例如，invoke()接受函数作为参数，因此，我们可以传递add()
如下代码：
invoke(a, b, fn)
  fn(a, b)
add(a, b)
  a + b
body
  padding invoke(5px, 10, add)
会编译成如下代码：
body {
  padding: 15px;
}
参数：
arguments是所有函数体都有的局部变量，包含传递的所有参数。
比如如下代码
sum()
  n = 0
  for num in arguments
    n = n + num
body
  padding sum(1px,2,3,4,5,6)
会编译成如下代码：
body {
  padding: 21px;
}

     6. 导入(important)

         在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

Sass Less及Stylus对于导入都是一样的，这里就不列举列子哦，具体的可以看Sass或者Less了。

对于Stylus还有更多高级语法：如果想要继续了解更多的话，可以看如下文章：

中文版的张鑫旭翻译的 http://www.zhangxinxu.com/jq/stylus/functions.php

英文原版的 http://learnboost.github.io/stylus/

对于styl文件如何编译？

比如项目目录结构如下：

编译文件有如下几种方式：

        1.     如果我们想编译单个文件，比如下编译css2下的test.styl的话，我们可以做如下操作，首先进入项目中css2文件夹里面，然后输入如下语句：stylus <test.styl> test.css

Ok后在目录下会生成一个test.css文件了 如下

其中test.styl 代码如下：

font-size = 14px

body font font-size Arial, sans-seri

编译成如下代码：

body { font: 14px Arial, sans-seri;}

      2.     如果我们想一起编译2个文件或者多个文件要如何编译呢？

             我们可以这样编译：stylus test.styl test2.styl …

       3.     我们也可以对一整个文件夹进行编译。比如文件夹为css2，我想对css2下的所有styl文件进行编译：如下代码：

               stylus css2

       4.     如果编译完成后，我们需要对css压缩的话，我们可以执行如下代码：

               stylus --compress <test.styl> test.css

               就可以对test.css压缩了。

      五：导入

             很多 CSS 开发者对导入的做法都不太感冒，因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同，它只是在语义上包含了不同的文件，但最终结果是一个单一的 CSS 文件，如果你是通过 @ import "file.css"; 导入 CSS 文件，那效果跟普通的 CSS 导入一样。注意：导入文件中定义的混入、变量等信息也将会被引入到主样式文件中，因此需要避免它们互相冲突。LESS Sass及Stylus都一样，如下目录代码

其中test.styl代码如下：

      font-size = 14px

　　body

  　font font-size Arial, sans-seri

main.styl代码如下：

   @import "index.css";

   @import "test.styl";

  p {

       background: #0982C1;

  }

Index.css代码如下：

p {

    color #3333;   

}

编译运行 stylus <main.styl> main.css 最终生成代码如下：

@import "index.css";

body {

  font: 14px Arial, sans-seri;

}

p {

  background: #0982c1;

}

六：运算符：(三者一样)

    你可以直接在 CSS 预处理器中进行样式的计算，例如：

body {

  margin: (14px/2);

  top: 50px + 100px;

  right: 100px - 50px;

  left: 10 * 10;

}

最终编译代码如下：

body {

  margin: 7px;

  top: 150px;

  right: 50px;

  left: 100;

}

以上是基本的语法比较，一些函数一般情况下css用不到，所以没有列出来。

    如果大家对stylus感兴趣的话，希望大家研究下stylus哦！关键是如何使用chrome或者firefox如何更方便的调式，和上面的Less或者Sass一样的方便调式，我们大家都知道 stylus比less sass语法更方便，使用起来更好，但是目前我没有看到Stylus的调式没有Less，sass方便，因此想问问大家有没有使用过Stylus开发项目？那么如果用过如何更方便的调式代码？希望大家有研究过希望能分享下？谢谢了！

 LESS和Sass及Stylus Demo下载