【化繁为简】非前端开发者的福音---CSS的预处理语言 Less&Sass

写在前面：

       众所周知CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域），在前期的界面样式设计时，需要书写大量看似没有逻辑的代码，不方便维护及扩展，也不利于重复调用，尤其对于一些UI设计师等非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前端开发的工作量，sass和less应势而生。.

LESS的介绍

第一个，less是单独的一种文件，可以理解为css的升级版，完全按照css写也没问题，不过它提供了很多便利的东 西， 可以省好多代码量。

第二个，html只认css,所以需要配套一些软件将less解析成css,引用时候，直接引用css 就好。gulp,koala 都是常用的，Koala好像简单且方便一点。 多种方式能平滑的将写好的代码转化成标准的CSS代码。

SASS是什么？

Sass（Syntactically Awesome Style Sheets）是一个相对新的编程语言，Sass为web前端开发而生，可以用它来定 义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，你可以使用最高效的方式，以少量的代 码创建复杂的设计。它改进并增强了CSS的能力，增加了变量，局部和函数这些特性。而这只使Sass一部分利器！

LESS和Sass的主要不同就是他们的实现方式，LESS是基于JavaScript，所以，是在客户端处理的。

另一方面，Sass是基于Ruby的，然后是在服务器端处理的。

---

第一部分：Less

---

 

// 这种注释不会被编译到CSS文件中

/*这种注释可以编译到CSS文件中*/

 

【less的基础语法】

1、 声明变量：@变量名 ： 变量值；

使用变量：@变量名;

>>>变量使用的原则：

设置频繁出现的值/后期需要进行批量修改的值/牵扯到数字运算的值，推荐进行变量声明。

>>>less中的变量类型：

在CSS中出现的属性值，都可以在less中用作变量名

①、数值类：不带单位的 123 带单位的 1px

②、字符串类型： 带引号的 "hahaha" 不带引号的 red #ff0000

③、颜色类： red #ff0000 RGB(255,255,0)

④、值列表类型：多个值用逗号或者空格分开 10px solid red

2、混合(Mixins):

①、无参混合

声明：.class{}

使用：在选择器中，使用.class直接调用

②、有参 无默认值 混合

声明：.class(@param){}

使用：：.class(paramValue)

③、有参 有默认值 混合

声明：.class(@param:10px){}

使用：：.class(paramValue) 或者 .class()

>>>如果声明时没有给参数赋默认值，那么调用时必须 赋值，否则报错！

>>>无参混合实际上就是一个普通的class选择器。会被编译到CSS文件中。

而有参混合，在编译时，不会被编译到CSS文件中；

3、Less中的匹配默认：

① 声明：

@pipei(条件一，参数){} @pipei(条件二，参数){} @pipei(@_，参数){}

② 调用：@pipei(条件的值，参数的值){}

③ 匹配规则：

根据调用时输入的条件值，去寻找与之匹配的混合执行；

@_选项不管是否匹配，都会执行。

4、 @arguments特殊变量

在混合中@arguments表示混合传入的所有参数。参数中的多个参数之间用空格分隔。

.border(@width,@style,@color){

border: @arguments; >>border: @width,@style,@color

}

5、less中的加减乘除运算

less中的所有变量和数值，都可以进行+ - * / 运算。

需要注意的是，当颜色进行运算时，红绿蓝分为三组进行运算，组内单独运算，组间互不干涉。

6、less中的嵌套：

less中允许CSS选择器按照HTML代码的结构进行嵌套

section{

>P{}

ul{

&:hover

}

}

①、 less中的选择器，默认是后代选择器。如果需要子代选择，则需要在前面加>

②、 &符号表示所在的上一层选择器。比如上述中的&,表示 section ul:hover

 

---

第二部分：Sass

---

 Sass:可以用来开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。

很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

一、什么是SASS

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

二、 使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

如果要将显示结果保存成文件，后面再跟一个.css文件名。

SASS提供四个变异风格的选项：

　* nested：嵌套缩进的css代码，它是默认值。

　* expanded：没有缩进的、扩展的css代码。

　* compact：简洁格式的css代码。

　* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

　　sass --style compressed test.sass test.css

上面的操作完全可以借助考拉软件来实现。

在Sass中：

//注释一：编译时不会被编译到CSS文件中；

 

/*

注释而二：在非compressed压缩模式下会被编译到CSS文件中。

*/

 

/*!

注释三：在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

*/

三、基本用法

3.1 变量

SASS允许使用变量，所有变量以$开头。

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

3.2 计算功能

SASS允许在代码中使用算式：

3.3 嵌套

SCSS中的嵌套：选择器嵌套 属性嵌套 伪类嵌套

① 选择器嵌套：ul{li{}}

嵌套默认是后代选择器。如果需要子代选择，则需要在选择器前面加>；

可以在选择器的{}中，使用&表示上一层的选择器

② 伪类嵌套：li{&:hover{}}

在选择器的{}中，使用&配合伪类事件

③ 属性嵌套：font：{size:18px;}

对于属性名有-分隔为多段的属性，可以使用属性嵌套；属性 名的前半部分必须紧跟：然后用{包裹后半部分}

eg:

SASS允许选择器嵌套。比如，下面的CSS代码：

可以写成：

属性也可以嵌套，比如border-color属性，可以写成：

注意，border后面必须加上冒号。

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

四、代码的重用:混合宏、继承、占位符：

① 混合宏:使用@mixin声明混合宏，在其他选择器中使用@include调用混合宏

eg：@mixin hunhe{} .class{@include hunhe};

eg：@mixin hunhe($param){} .class{@include hunhe(value)};

eg：@mixin hunhe($param:value){} .class{@include hunhe()};

 

>>>声明时可以有参数也可以没有参数。

>>> 调用时可以有赋值也可以没有赋值。

>>> 但是调用时必须符合声明的要求，与LESS混合相同。

优点：可以传参，不会产生同名的class

缺点：调用时会把混合宏中的所有代码copy到选择器中，产生大量的重复代码。

② 继承 ：声明一个普通的class，在其他的选择器中使用extend 继承这个class；

eg: .class1{} .class2{@extend.class1}

优点：将相同的代码提取到并集选择器，减少冗余代码。

缺点：①不能传参，②会生成一个多余的class

③ 占位符 ：使用%声明%占位符，在其他选择器中使用@extend 继承占位符；

%class{ } .class2{@extend %class1}

优点：①将相同的代码提取到并集选择器，减少冗余代码。

②不会生成一个多余的class

缺点： 不能传参

eg:

4.1 继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

　　.class1 {

　　　　border: 1px solid #ddd;

　　}

class2要继承class1，就要使用@extend命令：

　　.class2 {

　　　　@extend .class1;

　　　　font-size:120%;

　　}

4.2 Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。

　　@mixin left {

　　　　float: left;

　　　　margin-left: 10px;

　　}

使用@include命令，调用这个mixin。

　　div {

　　　　@include left;

　　}

mixin的强大之处，在于可以指定参数和缺省值。

　　@mixin left($value: 10px) {

　　　　float: left;

　　　　margin-right: $value;

　　}

使用的时候，根据需要加入参数：

　　div {

　　　　@include left(20px);

　　}

4.3 颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

　　lighten(#cc3, 10%) // #d6d65c

　　darken(#cc3, 10%) // #a3a329

　　grayscale(#cc3) // #808080

　　complement(#cc3) // #33c

4.4 插入文件

@import命令，用来插入外部文件。

　　@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。

　　@import "foo.css";

 

五、高级用法

5.1 条件语句

 

if条件结构：

条件结构需要写在选择器里面，条件结构的大括号直接包裹样式属性。

@if 条件{}

@else{}

5.2 循环语句

SASS支持for循环：

@for $i from 1 to $color0{} //不包括10

@for $i from 1 through $color0{} //包括10

 

while循环：

$i:0;

@while $i<10{

$i:$i+1;

}

each循环遍历:

@each $item in a,b,c,d{

//$item 表示a,b,c,d的每一项

}

 

5.3 自定义函数

SASS允许用户编写自己的函数。

[本文参考阮一峰有关Sass的相关讲解]