CSS预处理语言LESS与SCSS的介绍
预处理语言出现的背景：
CSS作为一种标记语言可以很好地完成页面样式的定义，但是一些标记语言固有的缺陷也限制了编写CSS的效率。要提高效率，一方面依赖工具，比如编辑器的自动补全；另一方面要依赖于语言本身的改进，但是由于CSS和浏览器以及互联网上的历史数据紧急耦合，由于兼容性问题，目前要设计新的语言来代替CSS是不太现实的。下面将要介绍的CSS预处理语言利用其他编程语言，巧妙地解决了CSS存在的不足。
LESS介绍：
LESS诞生于2009年，是使用JavaScript语言编写的一种CSS预处理语言，它为CSS赋予了编程语言的特性，如变量、继承、运算、函数等。LESS既可以在客户端上运行，也可以借助Node.js或Rhino在服务端运行。
1.使用基础
客户端调试方式：
(1).引用.less样式文件：
<link rel="stylesheet/less" type="text/css" href="http://localhost/styles.less">* 要设置rel值为“stylesheet/less”。需要引入http链接的.less的样式文件，使用本地的.less文件会报错。
（2）下载less.js，在<head>中引入：
<script src="less.js" type="text/javascript"></script>* 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的不同：
后续整理中……