SASS和LESS是什么？如何使用？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【SASS和LESS是什么？如何使用？】

大家好，我是IT修真院北京分院第20期的学员王野，一枚正直纯洁善良的程序员

今天给大家分享一下，修真院官网JS任务4，深度思考中的知识点——SASS和LESS是什么？如何使用？

一、背景介绍

CSS是我们学习前端开发必须掌握的技巧，叫做层叠样式表。

你可以用它开发网页样式，但是又一个很大的不足，就是没办法编程。也就是说，

CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，

CSS是一件很麻烦的东西。它没有变量，也没有条件语句，

只是一行行单纯的描述，写起来相当费事。

很自然地，有人就开始为CSS加入编程元素，

这被叫做"CSS预处理器"（css preprocessor）。通俗来讲：

“CSS预处理器用一种专门的编程语言，进行Web页面样式的设计，

然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，

无需考虑浏览器的兼容性问题”。

二、知识剖析

2.1 LESS是什么？

根据维基百科上的介绍，其实 LESS 是 Alexis Sellier 受 SASS 的影响创建的开源项目。

当时 SASS 采用了缩进作为分隔符来区分代码块，而不是 CSS 中广为使用的括号。

为了让 CSS 现有用户使用起来更为方便，Alexis 开发了 LESS 并提供了类似的功能。

在一开始，LESS 的解释器也同样是由 Ruby 编写，

后来才转而采用了 JavaScript. LESS 代码既可以运行在客户端，也可以运行在服务器端。

在客户端只要把 LESS 代码和相应的 JavaScript 解释器在同一页面引用即可；

而在服务器端，LESS 可以运行在 Node.js 上，也可以运行在 Rhino 这样的

JavaScript 引擎上。

2.2 如何使用LESS？

LESS语法

LESS 做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，

而是在现有的 CSS 语法之上，添加了许多其它的功能，

在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。

LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。

LESS 拥有四大特性：变量、混入、嵌套、函数。

变量

变量允许我们在一个地方定义一系列通用的值，然后在整个样式表中调用。

所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

------------------------------------------------------------------------------

@color:#4D926F;

改变变量的值之后试一试

@color:red;

混合

混合是指在一个 CLASS 中引入另外一个已经定义好的的 CLASS，

就像在当前 CLASS 中增加一个属性一样。Less实现了这种嵌套。

我们还可以使用参数，就好像我们再用一个函数一样。

------------------------------------------------------------------------------

.rounded-corners(@radius:5px) {

border-radius:@radius;

-webkit-border-radius:@radius;

-moz-border-radius:@radius;

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，

并且代码看起来更加的清晰。

ul{

width:50%;

margin:0auto;

padding:2rem;

li{

padding:2rem;

display:inline-block;

cursor:pointer;

&:hover{

color:#6c71c4;

函数与运算

运算提供了对属性值和颜色的加、减、乘、除操作，赋予你创建属性之间复杂关系的能力。

运算应当只出现在圆括号中，这样能确保与CSS的兼容。

@base-color:#111;

.i5,.i6{

background:(@base-color*3);

}

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

2.4 如何使用SASS？

变量

sass中可以定义变量，方便统一修改和维护。

---------------------------------------------------------------------------------

$color:#4D926F;

i{color:$color;}

嵌套：规则和less一样，不再赘述

mixin

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

@mixinbox-sizing($sizing:5px) {

-webkit-border-radius:$sizing;

-moz-border-radius:$sizing;

border-radius:$sizing;

}

.i1, .i2{

@includebox-sizing();

}

.i3, .i4, .i5, .i6{

@includebox-sizing(20px);

font-size:20px;

}

扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

.disp{

margin:3em;

display:inline-block;

width:50px;

height:40px;

background:blue;

}

.i1, .i2, .i3, .i4, .i5, .i6{

@extend.disp;

}

运算

sass可进行简单的加减乘除运算等

.i5, .i6{

height:200px*.1;

}

三、常见问题

LESS和SASS有什么区别？

四、解决方案

一、安装SASS与LESS

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。

less 在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），在客户端使用“.less”（LESS源文件），只需要在官网载一个javascript脚本文件主“less.js”。他们都可以利用第三方软件编译成css文件。

二、变量

sass 是以$开头定义的变量，如：$mainColor: #963;

less 是以@开头定义的变量，如 @mainColor: #963;

三、作用域

早期的sass 没有全局变量，满足就近原则，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。

less 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。

四、混合（MIXINS）

Sass的混合：sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。

一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”

sass混合

less 的混合：在LESS中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。不过LESS样式中声明Mixins和Sass声明方法不一样，他更像CSS定义样式，在LESS可以将Mixins看成是一个类选择器，当然 Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。

正如Sass混合的示例，同样在LESS样式中定义一个名叫“error”的Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”：