| 前言 |
首先，小编给大家解释一下什么是SCSS和LESS，Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compasss）有助于更好地组织管理样式文件，以及更高效地开发项目。
同样，Less 也是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
我相信，在大家的心中会与这么一个疑问，css真的是属于我们程序猿的语言吗？因为它不需要逻辑，只需要像写作文一样就可以将一个静态页面给“写”出来。而且，在平时的css编译中，我想大家最在意的就是样式的权重吧。简单的样式还好，复杂样式那从根目录开始的辣末长的选择器真心让人不忍直视。所以，为了照顾我们程序猿那么懒得生物，大神们编译了SCSS和LESS。他们最大的优势就是可以将css进行类似于逻辑编译。
| 一、最常用的辅助工具——SCSS |
虽然SASS和LESS同样为css辅助工具，但是大部分都比较喜欢使用SASS，想要知道原因，让小编给你解释！
1.1SCSS基本语法
1、scss中的变量
声明变量：$变量名：变量值；
而且，在SCSS中，允许将变量嵌套在字符串中，但是变量必须使用 ${} 包裹
$width :100px;
$position:left;
#div1{
width: $width;
height: $width/10;
background-color: red;
border-#{$position}:10px solid yellow;
}
看到声明变量的$符，是不是觉得很熟悉？没错！jQuery中的获取节点使用的也是$。所以在大部分的网页编译中，大部分都使用scss，便是为了编译时更舒服。不会有使用两种语言的感觉。
2、scss中的运算，会将单位进行运算，使用时需注意最终的单位是否正确。
eg:10px * 10px =100 px*px;
3、scss中的嵌套：选择器嵌套 属性嵌套 伪类嵌套
在scss的使用中，我们通常把选择器嵌套和伪类嵌套一起使用。因为这会极大地节省scss的代码量；
①选择器嵌套 ul{li{}}
嵌套默认表示后代选择器，如果需要子代选择器，可以在选择器前加>;可以在选择器的{}中，使用&表示上一层的选择器。
②伪类嵌套： li{&:hover{}}
在选择器的{}中，使用&配合伪类事件，可以表示当前选择器的伪类。
section{
background-color: #CCC;
p{color: red;}
ul{
padding: 0px;
li{
list-style: none;
&:hover{
background-color:red;
}
font:{
size:16px;
weight:bold;
family:"微软雅黑";
style:"italic";
}
}
}
}
③ 属性嵌套： font:{size:18px;}
对于属性名有-分割为多段的属性，可以使用属性嵌套，属性名的前半部分必须紧跟一个：才能用{}包裹属性的后半部分。
font:{
size:16px;
weight:bold;
family:"微软雅黑";
style:"italic";
}
属性嵌套类似于声明一的对象；对象名为属性名-以前的名字；对象里面的键名为-以后的属性名；值为想要设置的值；
4、注释
//注释一：编译时不会被编译到css文件中
/*
注释二：在非compressed压缩模式下，会被编译到css文件中。
* */
/*!
注释三：重要注释。在各种压缩模式下，都会被编译到css文件中
* */
1.2混合宏、继承、占位符
1、混合宏：使用@mixin声明混合宏，在其他选择器中使用@include调用混合宏。
混合宏有三种方式；
第一种方式：无参数；
@mixin hunhe{} .class{@include hunhe;}
@mixin hunhe(){
color: $color;
}
.class1{
@include hunhe;
background-color: blue;
}
第二种方式：有参数无默认值；
@mixin hunhe(@param){} .class{@include hunhe(value);}
@mixin hunhe($color){
color: $color;
}
.class2{
@include hunhe(green);
background-color: yellow;
}
、
第三种：有参数有默认值；
@mixin hunhe(@param:value){} .class{@include hunhe();}
@mixin hunhe($color:red){
color: $color;
}
.class3{
@include hunhe;
background-color: blue;
}
优缺点：
优点：①可以传参 ②不会产生同名的class
缺点：调用时，会把混合宏中所有的代码copy到选择器中，产生大量重复代码
2、继承：声明一个普通class，在其他选择器中使用@extend继承这个class；
.class{ } .class{ @extend.class1;}
//继承
.class1{
color: red;
}
.class{
@extend.class1;
background-color: yellow;
}
优缺点：
优点：将相同代码，提取并集选择器，减少冗余代码；
缺点：①不能传参；②会产生出一个多余的class；
3、占位符：使用%声明占位符，在其他选择器中使用@extend 继承占位符；
%class1{} .class1{@extend %class1;}
//占位符
%class1{
color: red;
}
.class4{
@extend %class1;
background-color: yellow;
}
.class5{
@extend %class1;
background-color: blue;
}
优缺点：
优点：①将相同代码，提取到并集选择器，减少冗余代码；②不会生出一个多余的代码
缺点：不能传参
1.3条件语句、循环、函数
scss作为css的辅助工具，赋予了css类似于js的一些功能，例如循环、if条件语句、函数等；其中，一定要记得@符号的使用！！！
1、if条件结构：
条件结构需要卸载选择器里面，条件结构的大括号直接包裹样式属性。
@if 条件{}
@else{}
//scss中的条件语句
.class6{
width: 100px;
height: 100px;
@if 1>2{
background-color: yellow;
}@else{
background-color: green;
}
}
2、for循环：有着两种方式，类似于开区间和闭区间；
@for $i from 1 to 10{} //不包含10
@for $i from 1 through 10{} //包含10
//for循环
@for $i from 1 through 10{
.border-#{$i}{
border:#{$i}px solid yellow;
}
}
3、while循环；
先使用$符定义一个变量，然后进行条件判断，在{}中进行循环；
//while循环
$i:0;
@while $i<10{
.while-#{$i}{
border:#{$i}px solid red;
}
$i:$i+1;
}
4、each 循环遍历
@each $item in a,b,c,d{
//$item 表示a,b,c,d的每一项
}
//each循环遍历
$i:0;
@each $item in c1,c2,c3,c4{
$i:$i+1;
.#{$item}{
border:#{$i}px solid red;
}
}
5、函数
scss也可以想js一样进行函数的调用；
@function func($num){
@return $num * 2;
}
.funcTest{
width: func(10px);
}
| 二、LESS |
less作为和scss同等地位的css辅助工具，在一些方面有着相同点，另一方面也有这他的优点；
2.1less基本语法
1、声明变量：@变量名：变量值
使用变量：@变量名
相对于scss，less变量的声明使用@符号；并且，变量一般使用在多次频繁出现的值，后期需要统一修改的值，牵扯到数值运算的值，推荐使用变量
>>>less中的变量类型
在css中出现的属性值，在less中都可以用作变量名
①数值类： 不带单位的 123 带单位的 1px
②字符串：带引号的 "hahahaah" 不带引号的 red #ff0000
③颜色类： red #ff0000 RGB(255,255,0)
④值列表类型： 多个值用逗号或空格分隔 10px solid red
@color :#ff0000;
@length:100px;
#div{
width: @length;
height:@length*2;
background-color: @color;
}
2、混合(Mixins)，我们也亲切的叫做“米心”；相当scss的混合宏，同样有着三种方式：
①无参数混合；实际上就是一个普通的class选择器，会被编译到css文件中；
声明： .class{}
调用：在选择器中，使用.class;直接调用
//无参数混合
.borderRadius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
②有参无默认值混合：
声明：.class(@param){}
调用:.class(paramValue);
//有参无默认值混合
.borderRadius1(@radius){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.class{
width: 10px;
height: 10px;
.borderRadius1(10px);
}
③有参有默认值混合：
声明：.class(@param：10px){}
调用:.class(paramValue); 或 .class();
//有参有默认值混合
.borderRadius2(@radius:10px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.class{
width: 10px;
height: 10px;
.borderRadius2();
}
>>>如果声明时没有给参数赋默认值，则调用时必须赋值，否则报错；
有参混合，在编译时，不会出现在css文件中；
2.2匹配、@argument、嵌套
1、LeSS的匹配默认
①声明,类似于switch语句；
@pipei(条件一，参数){} @pipei(条件二，参数){} @pipei(@_，参数){}
②调用：
@pipei(条件的值，参数的值){}
③匹配规则：
根据调用时输入的条件值，去寻找与之匹配的混合执行；
/*匹配模式*/
.pipei(lefts,@width:10px){
margin-left: @width;
}
.pipei(rights,@width:10px){
margin-right: @width;
}
.pipei(tops,@width:10px){
margin-top: @width;
}
.pipei(bottoms,@width:10px){
margin-bottom: @width;
}
.pipei(@_,@width:10px){
padding:10px;
}
@position:leftssssss;
//当上述条件都不符合时执行，相当于default；
.class1{
.pipei(@position,20px);
}
2、@arguments 特殊变量：
在混合中，@arguments表示混合传入的所有参数。@arguments中的多个参数，用空格分隔。
/*@arguments*/
.argu(@width,@style,@color){
//border:@width @style @color;
border:@arguments;
}
.class2{
.argu(10px,solid,red);
}
4、Less嵌套
less中允许css选择器按照HTML的结构进行嵌套。 相当于scss的选择器嵌套与伪类嵌套的组合；
/*less嵌套*/
section{
width: 800px;
height: 200px;
background-color: #cccbbb;
>p{
color: blueviolet;
font-size: 20px;
font-weight: bold;
}
ul{
padding: 0px;
list-style: none;
li{
display: block;
float: left;
width: 200px;
height: 50px;
background-color: yellow;
text-align: center;
&:hover{
background-color: cornflowerblue;
}
}
}
}
有两点值得注意；
①less的嵌套，默认是后代选择器。如果需要自带选择器，需要在前面加>；
②&符号，表示这个&所在的上一层表达器；比如上述嵌套：&:hover相当于section ul:hover
| 三、less&scss的使用 |
作为css的辅助工具，需要其操作环境最终还要转为css才能实现网页的布局；使用less直接创建Less文件就可以了吗？不，我们通常使用Koala进行less或scss到css的转换；
将less或scss的文件夹拖进koala的主页中，就可以随心所欲的编译了！！
| 编者按 |
对于一些简单的 项目，使用不使用scss和less并无区别，可在一些难度较大、比较复杂的项目上，less或scss就很有必要了。既节省我们的时间，有提高效率，一举多得！！！