[无名弟子]石林涛|2017年03月18日的日报-技能树.IT修真院

发表于： 2017-03-18 21:18:15

0 683

SASS、LESS介绍及其区别

小课堂【郑州第54期】

1.背景介绍

导语：

学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说， CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里， CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。通俗来讲： “CSS预处理器用一种专门的编程语言，进行Web页面样式的设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题”。

2.知识剖析

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 拥有四大特性：变量、混入、嵌套、函数。

详见 DEMO1

2.3 SASS是什么？

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

2.4 如何使用SASS？

详见DEMO2

3.常见问题

less和sass有什么区别？

4.解决方案

一、安装sass与less

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

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

二、变量

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

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

三、作用域

sass 没有全局变量，满足就近原则，但是实际中可以将需要定义的全局属性放在base.scss 文件中。注意变量名重复；
less 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。

四、混合（Mixins）

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

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

/*声明一个Mixin叫作“error”*/
    @mixin error($borderWidth:2px){
    border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

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

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

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
.error();/*直接调用error mixins*/
}
.login-error {
.error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}

五、嵌套

/*sass里的嵌套*/
 section {
   margin:10px;
   nav {
     height:25px;
     a {
       color:#0982c1;
       &:hover {
         text-decoration:underline;
       }
     }
   }
 }

六、继承

/*sass的继承：@extend*/
.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}
/*less的继承：类似于mixins*/
.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}