[真传弟子]运营-董瑞|2017年04月09日的日报-技能树.IT修真院

发表于： 2017-04-09 11:45:00

2 946

【css-11】sass、less的用法

小课堂【郑州第76期】

分享人：董瑞

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

LESS 还拥有一些很有趣的特性有助于我们的开发，例如模式匹配、条件表达式、命名空间和作用域，以及 JavaScript 赋值等等。

具体参考：
LESS使用参考1
LESS使用参考2
LESS使用参考3

可以了解：
值得参考的 10 个 LESS CSS 实例

2.3 SASS是什么？

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

2.4如何使用SASS？

更多用法见下面链接

Less介绍及其与Sass的差异

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 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在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;
                          }
                        }
                      }
                    }

关于嵌套的规则

显而易见：嵌套层级越多，生成的css的选择器的层级就会越深。哦，那么，why？这就涉及到css选择器的优化了。
首先，我们要弄清楚浏览器是怎么识别我们的选择器的，具体原理不赘述，知道是“选择器从右到左的原则”；
于是，选择器的最后一部分，也就是选择器的最右边部分，就是“关键选择器”，它将决定选择器的效率高低；
那么我们要提高选择器效率，就首先要考虑关键选择器，结论“越是具体的关键选择器，其性能越高”

这里找到一份steve souder大神排的一个顺序：
ID选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul>li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）

六、继承

                
                    /*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;
                    }