CSS预处理器之less & sass & stylus

大纲目录:

预处理器的作用和原理

CSS预处理器之less

CSS预处理器之sass

CSS预处理器之stylus

1. 预处理器作用和原理

1-1.什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

1-2.CSS预处理器的特点

基于CSS的另一种语言

通过工具编译成CSS

添加了很多CSS不具备的特性

能提升CSS文件的组织

1-3.CSS预处理器的作用

帮助更好地组织CSS代码

提高代码复用率

提升可维护性

1-4.CSS预处理器的优缺点

优点：提高代码复用率和可维护性

缺点：需要引入编译过程有学习成本

1-5.CSS预处理器的能力

变量和计算减少重复代码

嵌套反映层级和约束

Extend 和 Mixin复用代码片段

循环适应于复杂有规律的样式

import CSS文件模块化

CSS预处理器语言，比如说：

Sass（SCSS）

LESS

Stylus

Turbine

Swithch CSS

CSS Cacheer

DT CSS

到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀，讨论的也多，对比的也多。

1-6.CSS预处理器的框架

Less - Lesshat / est ecomfe.github.io/est/

sass - Compass compass-style.org/examples/

提供现成的mixin

类似JS类库封装常用功能

2. CSS预处理器之less

less官方文档 lesscss.org/

less中文文档 less.bootcss.com/

2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）

根据维基百科上的介绍，其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了LESS并提供了类似CSS的书写功能。

2-1.less的简介

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端;

less文件后缀为.less,例如: index.less

2-2.less的安装

npm install -g less

lessc styles.less styles.css

2-3.less的编译

编译方法一: 在nodejs环境中使用less

在命令行中运行: lessc styles.less styles.css

单文件自动监测编译：插件 watcher-lessc(终止操作是 ctrl+c)

watcher-lessc: 表示编译的同时也添加实时监控watcher

-i: 表示输入文件，即要编译的less文件；

-o: 表示输出文件，即编译出来的css文件；

path: 在-o后跟的路径是编译出来的css文件；

命令: watcher-lessc -i style.less -o style.css

编译方法二: 在浏览器环境中使用less

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

编译方法三: 工具编译

考拉 koala-app.com/index-zh.ht…

编译方法四:在线工具

ecomfe.github.io/est/fiddle/

编译方法五:vscode插件

easy less

2-4.less的功能

变量（Variables）

混合（Mixins）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法;

扩展（Extend）

嵌套（Nesting）

运算（Operations）

转义（Escaping）

函数（Functions）

命名空间和访问符

映射（Maps）

作用域（Scope）

注释（Comments）

导入（Importing）

学习教程： www.vue5.com/less/less.h…

3. CSS预处理器之sass

Sass官方文档 www.sasscss.com/guide

Sass中文网 www.sass.hk/ www.sasscss.com/

练习小测试 sassmeister.com/

Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。

3-1.sass的简介

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍）并不能被大众接受，不过由于其强大的功能和 Ruby on Rails 的大力推动，还是有很多开发者选择了 Sass。

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

虽然缩进式风格可以有效缩减代码量，强制规范编码风格，但它一方面并不为大多数程序接受，另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早，但远不如 LESS 普及的原因。

Sass 和 SCSS的区别:

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Sass/SCSS 和纯 CSS 写法差:

Sass 和 CSS 写法有差别：Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的；

SCSS 和 CSS 写法无差别：SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。

// Sass 语法
$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color
  
// SCSS 语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

3-2.sass的安装

方法一：应用程序

有很多应用程序可以让您在几分钟内启动并运行 Sass，并且支持 Mac、Windows 和 Linux 平台。这些程序大部分是可以免费下载的，但也有一些是需要付费的（但完全值得）

CodeKit (Paid) Mac

Compass.app (Paid, Open Source) Mac Windows Linux

Ghostlab (Paid) Mac Windows

Hammer (Paid) Mac

Koala (Open Source) Mac Windows Linux

LiveReload (Paid, Open Source) Mac Windows

Prepros (Paid) Mac Windows Linux

Scout-App (Free, Open Source) Windows Linux Mac

方法二：命令行

通过命令行安装 Sass 后，你就可以执行 sass 命令把 .sass 和 .scss 文件编译为 .css 文件。例如：sass index.scss index.css，然后执行 sass --version 命令以验证安装是否正确。如果安装成功，将输出版本号 1.26.4。你还可以执行 sass --help 获取更多关于命令行用法的信息。

跨平台（通过 npm 安装）npm install -g sass

3-3.sass的编译

编译方法一: 命令编译

单文件编译: sass input.scss output.css

实时监视.scss文件: sass --watch input.scss output.css

可以使用文件夹路径作为输入和输出，并使用冒号分隔它们，来监听文件并输出到目录：sass --watch app/sass:public/stylesheets

编译方法二: GUI界面工具编译

Koala (koala-app.com/) - 推荐

Compass.app（compass.kkbox.com/）

Scout（mhs.github.io/scout-app/）

CodeKit（incident57.com/codekit/ind… - 推荐

Prepros（prepros.io/）

编译方法三: 自动化编译(利用Grunt/Gulp/webpack)

编译方法四: 在线编译工具 jsrun.net/app/scss

3-4.sass的功能

sass变量: 变量声明和调用，普通变量和默认变量 !default，局部变量和全局变量

sass mixin及参数: @mixin声明/@include调用

sass extend扩展: @extend

sass 占位符: %placeholder

sass嵌套: 选择器嵌套、属性嵌套、伪类嵌套

sass操作符和运算

sass插值: #{}

sass的控制指令: @if/@else、@for、@while、@each

sass的函数功能:字符串函数、列表函数、map函数

sass的@规则: @import、@media、@extend、@at-root

4. CSS预处理器之stylus

Stylus官网：learnboost.github.com/stylus

stylus.bootcss.com/

www.zhangxinxu.com/jq/stylus/

Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。

Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

4-1.stylus的简介

富于表现力、动态的、健壮的 CSS

stylus文件后缀是 .styl

4-2.stylus的安装

$ npm install -g stylus

运行stylus -h 可以获得相关的命令行支持

4-3.stylus的编译

输入 stylus demo.styl -o dist

watch监听：stylus -w xxx.styl -o xxx.css // -w

-w 是自动监视文件

-o 是将编译后的CSS文件输出到指定文件中

4-4.Stylus的功能

不需要写分号！！不需要写冒号！！甚至连花括号都可以省略，只需要简单的缩进即可

juejin.cn/post/684490…

选择器(Selectors)

变量(Variables)

插值(Interpolation)

运算符(Operators)

混合书写(Mixins)

方法(Functions)

关键字参数(Keyword Arguments)

内置方法(Built-in Functions)

其余参数(Rest Params)

注释(Comments)

条件(Conditionals)

迭代(Iteration)

@import

@media

@font-face

@keyframes

@extend

[url()](