预处理语言出现的背景：     

        CSS作为一种标记语言可以很好地完成页面样式的定义，但是一些标记语言固有的缺陷也限制了编写CSS的效率。要提高效率，一方面依赖工具，比如编辑器的自动补全；另一方面要依赖于语言本身的改进，但是由于CSS和浏览器以及互联网上的历史数据紧急耦合，由于兼容性问题，目前要设计新的语言来代替CSS是不太现实的。下面将要介绍的CSS预处理语言利用其他编程语言，巧妙地解决了CSS存在的不足。

LESS介绍：

        LESS诞生于2009年，是使用JavaScript语言编写的一种CSS预处理语言，它为CSS赋予了编程语言的特性，如变量、继承、运算、函数等。LESS既可以在客户端上运行，也可以借助Node.js或Rhino在服务端运行。

1.使用基础

客户端调试方式：

(1).引用.less样式文件：

*  要设置rel值为“stylesheet/less”。需要引入http链接的.less的样式文件，使用本地的.less文件会报错。

（2）下载less.js，在中引入：

* less样式文件一定要在引入less.js前先引入。

2.使用变量和操作符

使用@关键字进行变量的定义。

@color: #00c;#header {color: @color;
}/* 编译后的css代码 */
#header {color: #0000cc;
}

3.使用Mixin混入

 Mixin概念在很多编程语言中都有，一般译作混合、混入，是可以重用的代码块。

.rounded-corners(@radius: 5px) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;border-radius: @radius;
}#main {.rounded-corners;
}    #btn-corners {.rounded-corners(8px);
}/* 编译后的css代码 */#main {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;
}#btn-corners {-webkit-border-radius: 8px;-moz-border-radius: 8px;-ms-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;
}

Mixin的语法关键字是一个.符号，可以将其联想记忆为CSS选择器中的类。采用Mixin，实现一次定义，无限使用，既可以大大缩减无谓的重复定义，又提高了代码的可读性和可维护性。

4.内嵌规则

使用嵌套的方式编写层叠样式。

// css的写法
#main div li {list-style: none;
}#main .container {margin: 0 auto;width: 960px
} // 使用less的写法
#main {div li {list-style: none;}.container {margin: 0 auto;width: 960px}
}    

5.运算

   任何数字、颜色或者变量都可以参与运算。

@base: 5px;@doubleBase: @base * 2;color: #999 / 3;border: 1px solid @base*2;

SCSS介绍：

        说起SCSS，我们不得不说SASS。SASS是采用Ruby语言编写的一款CSS预处理语言，诞生于2007年，是最早的成熟CSS预处理语言。SASS从第三代开始，完全向下兼容普及的CSS代码，这一代的SASS也被称为SCSS。

1.使用变量

SCSS的变量关键字和PHP一样，都是一个美元符号$开头。

$color: #00c; div {color: $color;
}$side: left;
.rounded {border-#{$side}-radius: 5px
}/* 使用scss编译之后 */div {color: #00c;
}.rounded {border-left-radius: 5px;
}

  2.计算

        允许直接在代码中编写算式，并且支持变量和函数。

$width: 100px;
#main {width: $width * 10;margin:(20px / 2);padding: pi()px;
}/* 使用scss编译之后 */
#main {width: 1000px;margin: 40px;padding: 3.14159px;
}

3.使用@import导入

@import可以用来插入外部文件；如果插入的是CSS文件，则等同于CSS的import命令。

@import "style.scss";@import "styles.css";

4.使用@extend继承

支持编程语言中的继承概念。

.class1 {border: 1px solid #333;
}.class2 {@extend .class1;width: 100px;
}

5.使用@mixin混入

@mixin float_left {float: left;margin-left: 10px;
}#main {@include float_left;
}

6.使用@function定义函数

@function double($n) {@return $n * 2;
}#sidebar {width: double(5px)
}

7.控制语句

编程语言都有程序控制语句，来控制代码的运行方向。SCSS中也有@if、@else、@while等控制语句。

（1）if 语句：

div {@if lightness($color) > 30% {background-color: #333;} @else {background-color: #fff;}
}

(2) for 循环：

@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid #333;}
}

(3) while 循环：

$i: 8;@while $i > 0 {.item-#{$i} {width: 2px * $i}
}

LESS与SCSS的不同：

后续整理中……