前端入门23-CSS预处理器（Less&Sass）

声明

本篇内容梳理自以下几个来源：

感谢大佬们的分享。

正文-CSS预处理（less&Sass）

CSS预处理

什么是 CSS 预处理？为什么要有 CSS 预处理？

这里就讲讲这两个问题，写过 CSS 应该就会比较清楚，虽然我才刚入门，但在写一些练手时就已经有点感觉了：写 CSS 后，很难维护，维护基本要靠注释来，而且由于 HTML 文档中标签的嵌套层次复杂，导致写 CSS 的选择器时也很费劲，尤其是在后期为某部分标签新增样式时，总会不知道到底应该在 CSS 文件中哪里写这个选择器，这个选择器是否会与前面冲突。

最有感觉的一点是，CSS 代码基本没法复用，一个页面一份 CSS，每次都需要重写，只是很多时候，可以直接去旧的里面复制粘贴。

有这么些问题是因为 CSS 本身并不是一门编程语言，它只是一个标记语言，静态语言，不具备编程语言的特性，所以写容易，但维护会比较难。

这个时候，CSS 预处理器就出现了，其实应该是说 Sass 和 Less 这类语言出现了。

Sass 和 Less 这类语言，其实可以理解成 CSS 的超集，也就是它们是基于 CSS 原本的语法格式基础上，增加了编程语言的特性，如变量的使用、逻辑语句的支持、函数等。让 CSS 代码更容易维护和复用。

但浏览器最终肯定是只认识 CSS 文件的，它并无法处理 CSS 中的那些变量、逻辑语句，所以需要有一个编译的过程，将 Sass 或 Less 写的代码转换成标准的 CSS 代码，这个过程就称为 CSS 预处理。

所以，CSS 预处理器其实只是一个过程的称呼，主要工作就是将源代码编译并输出标准的 CSS 文件，而这个源代码可以用 Sass 写，也可以用 Less，当然还有其他很多种语言。

那么，到底哪一种语言好，我还没能力来讨论，反正存在即有理，每种语言总它的优缺点、总有它的适用场景。

下面，主要就来介绍下其中的两种语言：Less 和 Sass。

我觉得，掌握 CSS 预处理的关键，其实也就两点，一是掌握语言的语法、二是清楚怎么编译成标准的 CSS 文件；语法基本都不会很难，编译一般需要配置一些环境，因为我使用的开发工具是 WebStrom，所以会介绍下 WebStrom 上的配置。

Less

使用

Less 写的 CSS 文件后缀名为 .less，但浏览器并不认识 less 文件，所以最后需要转换成 css 文件，有两种方式：

  • 借助 less.js，程序运行期间，浏览器会自动借助 less.js 来解析 less 文件内的代码，转成 css 标准语法

这种方式，不需要配置任何其他环境，只需要下载 less.js，并在项目中使用即可，但有几点需要注意：

<head>
    <!--link标签需要设置 rel=stylesheet/less, less.js的加载需要放在所有 link 标签后面-->
    <link rel="stylesheet/less" type="text/css" href="css/src/main.less"/>
    <link rel="stylesheet/less" type="text/css" href="css/src/test.less"/>
    <script src="js/lib/less.js"></script>
</head>

HTML 文档通过 link 标签引入 less 文件时，需要将 link 标签的 rel 属性设置为 stylesheet/less，否则无效；

而且，用 <script> 标签加载 less.js 的代码需要放在最后，即所有用 link 标签引入 less 文件的后面，因为 less.js 文件加载成功后就会去将 less 转成 css 标准样式，在 <script> 标签后面才用 link 标签引入的那些 less 文件就无法被转换了。

less.js 下载地址：https://github.com/less/less.js/releases

  • 借助 node.js 环境，安装完 less 后，执行 lessc 命令

第一种方式，虽然便捷，但会让页面的渲染多了一个转换步骤，延长页面渲染时长，所以，还可以用第二种方式，直接在本地将 less 转成 css 文件后，项目直接使用转换后输出的 css 文件。

假设你已经在电脑上安装了 node.js 了，如果还没有，先去网上自行搜索下教程，很多，也很快。

首次使用需要先安装 less，打开终端，执行下述命令：

npm install -g less

安装完后，就可以使用 lessc 命令，如：

lessc main.less main.css

这是最简单的用法，将 main.less 文件编译输出 main.css；还有其他高级的用法，比如顺便压缩 css 文件，输出 .min.css 文件等等。

WebStorm配置

我是比较习惯使用第二种方式，也就是在本地就将 less 文件转成 css 文件，项目里是直接使用转换后输出的 css 文件了，而且我用的开发工具是 WebStrom，所以可以借助它，省去了每次自己输命令的操作：

第一步：在项目根目录下执行 npm init -y 初始化项目，初始化完项目后，根目录会生成 package.json 文件；

第二步：打开 package.json，在里面的 scripts 字段，根据你的项目结构，输入脚本命令；

第三步：点击 scripts 旁边的三角形按钮，就可以自动执行脚本命令，完成转换工作；

第四步：（可选）如果嫌每次都需要自己手动点击按钮麻烦，可以将这项工作添加进 File Watcher 功能中，每次文件改动就会自动执行脚本命令，完成转换，具体参考上一篇，或者自行搜索，很简单。

这是例子的项目结构：

src 目录中存放 less 文件，dist 目录中存放转换后输出的 css 文件，所以，我的 package.json 里的脚本命令如下：

具体的脚本命令可根据实际需求，实际项目结构，自行决定。

语法

好了，清楚了 less 文件的两种使用方式后，就可以来学习语法了，这样在学习语法过程中，就可以随时进行转换，查看 less 书写的代码，最终转换的 css 代码是什么样的，这样比较着学习比较容易掌握。

  • 变量

通过 @变量名: 来定义变量，通过 @变量名 使用变量，其实本质上是常量了，如：

@width: 10px;  /*定义变量*/
@height: @width + 10px; /*使用变量，和逻辑语句*/

#header {
  width: @width;  /*使用变量*/
  height: @height;
}

转换成 CSS 文件：

/*定义变量*/
/*使用变量，和逻辑语句*/
#header {
  width: 10px;
  /*使用变量*/
  height: 20px;
}
  • 注释

上个例子中，转换后的注释也还保留着，这是因为 less 和 css 都支持 /* */ 的注释方式，所以这种会保留，但如果是 //，这种只有在 less 中支持，css 不支持，那么这种注释就不会保留，验证下：

/*这是注释1*/
//这是注释2

转换成 css 文件：

/*这是注释1*/

所以，在 less 中使用注释时，需要注意下，哪些是想保留，哪些是不想保留的。

  • Mixins（混合）

也有的文章里翻译成混入，还有的文章直接保留单词，不做翻译，可能是觉得中文翻译不能够很好的表达意思吧。

先说有这么种场景：有时候写在某个选择器中的属性样式，在其他选择器中也需要，所以通常是直接将那部分复制粘贴过来使用。

而 less 的 Mixins 允许你在某个选择器内，直接使用其他选择器内的属性样式，所以中文翻译才有混合，或混入之说，其实也就是将其他的属性样式混合到当前选择器中。

看个例子就明白了：

.class1 {   //类选择器 class1 的属性样式
  width: 10px;
  height: 20px;
}

.class2(@color: #fff) {  //定义了一个模板样式，类似于函数的作用
  background-color: @color;
}

#id1() {  //定义了一个模板样式，类似于函数作用
  border: 1px solid #ff22ff;
}

.mian { 
  .class1; //直接使用其他选择器定义的属性样式
  .class2(#f2f); //使用模板样式，传入参数
  #id1; //使用模板样式，不传参时，括号可省略
}

转换后的 CSS 文件：

.class1 {
  width: 10px;
  height: 20px;
}
.mian {
  width: 10px;
  height: 20px;
  background-color: #f2f;
  border: 1px solid #ff22ff;
}

可以注意对比源代码和转换后的代码，原本就定义好的基本选择器，如 .class1，可直接在其他选择器内通过 .calss1 将它内部的属性样式都复制过来。

也可以在基本选择器后面加上 () 括号，这样一来，这个就会被当做模板处理，作用类似于函数，可接收参数，使用时就类似于调用函数那么使用，如果不传参，调用时也可以将括号省略。既然是作为函数使用，那么它们存在的意义就只是被调用，所以转换后的 CSS 中并不会存在这个函数。

另外，有的文章中，对 Mixins 的解释是说，在 class 中使用 class，但上面的例子中也测试了，class 中也是可以使用其他 id 选择器的属性样式的，所以应该不仅限于 class 类选择器，但不能用于组合选择器中。

  • 命名空间

我对于命名空间的理解：属于 less 自己的命名空间，也就是这些代码并不会在转换后的 CSS 文件中出现，因为它只属于 less。

所以，其实也就是上述例子中，类似函数存在的那些模板选择器，当在书写选择器时，在其后面增加 () 括号，则表示这个选择器只属于 less 的命名空间，转成 CSS 后并不会出现。k

  • 嵌套

在写 CSS 时，组合选择器经常写得很复杂，因为 HTML 里的标签嵌套层次本身就很复杂，而且组合选择器写完也不是能够很明显的表示出它的目的，所以 less 允许依据 HTML 中的嵌套层次来书写，不用去记那么多组合选择器的规则，如：

body {
  font-size: 16px;
  .content {
    .banner {
      ul {
        img {
          width: 700px;
          height: 300px;
          &:hover {
            width: 800px;
            height: 300px;
          }
        }
      }
    }
  }
}

转换成 CSS 文件：

body {
  font-size: 16px;
}
body .content .banner ul img {
  width: 700px;
  height: 300px;
}
body .content .banner ul img:hover {
  width: 800px;
  height: 300px;
}

也就是，子孙后代的组合选择器规则可以不用去记，直接根据 HTML 文档中标签的嵌套层次来书写即可，这样便于后期维护，如果要对某个标签新增某些样式，也知道该去哪里找。

有一点需要注意的是，类似 a:hover 这种伪类选择器，需要加一个 & 符号。

  • 运算

less 允许在代码中进行一些简单的加、减、乘、除基本运算，结合变量的使用，可进行一些字体、颜色等的动态运算效果。

@border: 1px;
@color: #fff;
#header {
  color: @color * 0.5;
  border-width: @border @border*2 @border*3 @border*4;
}

转换成 CSS 后：

#header {
  color: #808080;
  border-width: 1px 2px 3px 4px;
}

通常，变量和运算都是用于对颜色、大小等进行计算。

  • 内置函数

less 内置了一些基础函数，可用于转换颜色、处理字符串、算术运算等，这里列举一些函数：

color("#aaa");  //输出 #aaa， 将字符串的颜色值转换为颜色值
image-size("file.png");  //输出 => 10px 10px，获取图片文件的宽高信息
//image-with("file.png"); image-height("file.png"); 获取图片文件宽高
convert(9s, "ms");  //输出 => 9000ms，单位换算，例如对 m,cm,mmin,pt,pc的换算
@size: if((true), 1px, 0px);  //if函数，第一个参数为条件，满足则返回第二个参数，不满足返回第三个参数
if(not (true), 1px, 0px);     //非语句， not
if((true) and (true), 1px, 0px); //逻辑与语句， and 
if((false) or (true), 1px, 0px); //逻辑或语句， or 

//处理数组
@list: "banana", "tomato", "potato", "peach";
length(@list);  // 输出 => 4
extract(@list, 3);  //输出 => potato,注意第一个不是从 0 开始计算

//类型判断
isnumber(#ff0);  // false
isstring("234"); // true
iscolor(#ff0);   // true
isXXX

...

内置函数很多，用途也很多，覆盖了基本算术运算、逻辑语句、颜色计算、字符串处理等等，需要用时再查手册吧。

  • 作用域

作用域很好理解，就是类似 JavaScript 中的变量作用域，因为在 less 中都是通过 @变量名: 来定义变量的，后定义的会覆盖掉前定义的，但当在不同嵌套层次中定义同一变量时，就存在局部变量和外部变量之分，内部变量并不会覆盖掉外部变量。

而且，less 的变量定义也有类似 JavaScript 中的提前特性，如：

@var: red;

#aaa {
  color: @var;  // yellow，因为后面定义的 @var:yellow 将 @var:red 覆盖掉了
}

#page {
  #header {
    color: @var; // white，内部变量不影响外部变量
  }
  @var: white;
}

@var: yellow;

#ppp {
  color: @var;  //yellow
}

看看转换成 CSS 后：

#aaa {
  color: yellow;
}
#page #header {
  color: white;
}
#ppp {
  color: yellow;
}
  • import（导入）

如果某份 less 文件是可以复用的，那么可以使用 @import 命令将其全部引入使用。

@import "main";

最后在 test.css 里会汇合 main.less 里的代码。

以上，只是介绍 less 的基础语法，还有更多详细、复杂的语法用途，需要时再翻阅文档吧。

Sass（Scss）

Sass 相比于 Less 功能会更强大，但也更复杂。

Sass 和 Scss 本质是一家，Sass 早期版本的文件后缀名是 .sass，从 Sass 3 之后，因为修改了一些特性语法，Sass 更加强大且易使用，从这个版本之后的文件后缀名改成了 .scss，所以 Scss 其实 Sass 的新版本的称呼，但两者本质上没太大区别。

Scss 是基于 Sass 的语法基础上，修改了一部分的语法。比如早期的 Sass 是通过换行和缩进如：

#sidebar
  width: 30%
  background-color: #faa

这种语法格式跟 CSS 不一致，让使用者会很不习惯，Scss 之后就换成用分号和括号了：

#sidebar {
  width: 30%;
  background-color: #faa;
}

使用

Sass 不像 Less 一样可以直接借助 less.js 来进行转换，它是基于 Ruby 运行环境，所以电脑上需要先安装 Ruby，然后才能有办法将 Sass 文件转成 CSS。

Ruby 下载地址：https://rubyinstaller.org/downloads/

因为是 exe 文件，下载完直接按提示安装就可以了，安装后打开终端，执行 gem 命名安装 Sass：

gem install sass

安装完 Sass 后，就可以通过 scss 命令来进行转换工作了，如：

scss main.scss main.css

上述命令中，scss 换成 sass 也可以，但注意，scss 或 sass 命令是基于 Ruby 环境下运行的命令，因为电脑上已经安装过 Ruby 了，也通过 Ruby 安装了 Sass，所以才可以在终端里直接执行 scss 命令。

而类似于 Less 中说到的，WebStrom 可以借助 package.json 里的 scripts 来手动运行脚本命令，这有个前提，就这些脚本命令是运行在 node.js 环境上的，所以如果你直接将上述 scss 命令配置到 package.json 的 script 里，你会发现，是运行不了的。

要解决这个问题，让 WebStrom 能够运行 sass 命令来处理转换工作有两种方式：

  • 直接去 WebStrom 配置 File Watcher，program 选择 Ruby 目录中的 sass.bat 或 scss.bat

这种方式下，每次配置的文件变动时，会自动生成对应的 css 文件，转换工作会自动实时进行。但如果不习惯这种方式，想要每次编写完 scss 代码后，手动来触发转换工作，那么可以选择第二种方式：

  • 通过 npm 命令安装 sass

在终端里执行 npm install -g sass，这样就可以类似配置 less 那样的步骤来使用 sass 命令了，在 package.json 里配置相关命令，然后手动点击脚本的运行即可。

但 npm 安装的 sass 跟在 Ruby 下安装的 sass 是否有和区别，我不清楚，用段时间，如果有啥问题再来说说。

而且，对于选择使用 Sass，刚接触可能会有些困惑，是应该使用哪个后缀名的文件，命令是该用 sass 还是 scss 来进行转换，我也有这个困惑，但感觉好像并没有什么区别，先试着用段时间，以后熟悉了再来讲讲。

最后，Sass 虽然有 .sass 和 .scss 两种后缀名的文件，但建议使用 .scss，因为前者的语法跟 CSS 很不一样，使用起来会有些不习惯，当然如果你有 Ruby 基础的话，可能会比较喜欢这种。我个人会选择后者。

语法

语法方面，大部分类似于 Less，但就细节方面可能有些不一样，还有，支持更多更强大的功能吧。

上面介绍的 Less 的基础语法、基础功能，Sass 也基本全部支持，也差不了多少，所以下面就不一个个来介绍了，详细的到开头声明部分给的中文网链接中去查阅即可。

下面就主要列一些不同的地方：

  • 变量

Sass 中的变量用 $变量名: 定义，用 $变量名 使用，其余跟 Less 差不了多少。

  • 作用域

Less 中的变量分局部作用域和全局作用域，但在 Sass 中，不同版本，作用域范围并不一样，摘抄一段原文中描述：

Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近，规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量，则局部变量覆盖全局变量。从 Sass 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。

  • 条件语句

Less 中并不支持条件语句，当然，可以通过内置函数 if 以及 and，or，not 这些来模拟条件语句。

在 Sass 中是支持条件语句的，但也不是像其他编程语言直接 if 这样通过保留字来编写，需要加个 @ 符合，如：

@if $support-legacy {
  // …
} @else {
  // …
}

教程中给了几条准则要求：

  • 除非必要，不然不需要括号；
  • 务必在 @if 之前添加空行；
  • 务必在左开大括号({)后换行；
  • @else 语句和它前面的右闭大括号(})写在同一行；
  • 务必在右闭大括号(})后添加空行，除非下一行还是右闭大括号(})，那么就在最后一个右闭大括号(})后添加空行。

另外，教程中也说了：

除非你的代码中有偏复杂的逻辑，否则没必要在日常开发的样式表中使用条件语句。实际上，条件语句主要适用于库和框架。

其他区别，等用段时间，熟悉了再来讲讲。

框架-Compass

Sass 有一点比 Less 有优势的就是，目前有很多稳定且热门的基于 Sass 编写的框架库，比如：Compass、Bourbon 和 Susy 等。

这些框架库就类似于 jQurey 和 JavaScript 关系，对 Sass 进行了一层封装，让编写 Sass 代码的人，可以极为简便的开发，我还没用过，就不过多介绍了。

大家好，我是 dasu，欢迎关注我的公众号（dasuAndroidTv），公众号中有我的联系方式，欢迎有事没事来唠嗑一下，如果你觉得本篇内容有帮助到你，可以转载但记得要关注，要标明原文哦，谢谢支持~
dasuAndroidTv2.png

posted @ 2018-12-13 15:01  请叫我大苏  阅读(1122)  评论(0)  编辑  收藏  举报