什么是CSS预处理器
CSS预处理器定义了一种新的语言，它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。
CSS预处理器的种类
目前最主流的三个预处理器分别为：Sass 、 Less和 Stylus。
SASS:2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架。Sass默认使用.sass扩展名。
现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则(受LESS影响)和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS（SCSS默认使用 .scss扩展名），在Sass3之后的版本都支持这种语法规则。
LESS：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的，Less默认使用.Less扩展名。
根据维基百科上的介绍，其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更加方便，Alexis开发了LESS并提供了类似CSS的书写功能。
Stylus：2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS，Stylus默认使用.styl扩展名。
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
预处理器语法一般包括：
- 变量
- 嵌套
- 混合Mixins
- 运算
- 导入 (Import)
- 函数
语法
CSS预编译语言的语法都非常简单，如果你的编辑器给力的话，file watching会自动找出语法错误。
语法上Sass3、Scss和Less非常相似，旧版Sass和Stylus特殊一些，旧版Sass我们就了解一下，Stylus的语法更加灵活一些,功能也更强大一些。
例如
1、Sass
1/*旧版sass语法*/ 2h1 3 color: #000 4 font-size: 24px
2、SCSS
1/*scss语法*/ 2h1{ 3 color: #000; 4 font-size: 24px; 5}
3、LESS
1/*less语法*/ 2h1{ 3 color: #000; 4 font-size: 24px; 5}
4、Stylus
1/*Stylus语法的多样式*/ 2h1{ 3 color: #000; 4 font-size: 24px; 5} 6h1 7 color: #000 8 font-size: 24px 9h1 10 color #fff 11 font-size 24px
变量
1/* 1、Scss的变量必须是$开始*/ 2$mainColor: #000; 3h1{ 4 color: $mainColor; 5} 6 7/* 2、Less 的变量名使用 @ 符号开始*/ 8@mainColor: #000; 9h1{ 10 color: @mainColor; 11} 12 13/* 4、Stylus 的变量名不要用 @ 开头， =赋值 */ 14mainColor = #000; 15h1{ 16 color: mainColor; 17}
嵌套
如果你需要在CSS中相同的parent引用多个元素，你需要一遍一遍的去写parent。用CSS预处理器，就可以少些很多单词，而且父节点关系一目了然。
下面将不再介绍老版sass的写法，直接介绍scss写法。
同样生成
1nav{ 2 color: #000; 3 font-size: 16px; 4} 5nav a{ 6 color: #0000cc; 7 font-size: 18px; 8} 9nav a.first{ 10 color:red 11}
/Scss、less、Stylus的嵌套,伪类嵌套都是使用&/ nav { color: #000; font-size: 16px; a { color: #0000cc; font-size: 18px; &.first { color: red; } } }
/Stylus的嵌套还可以这样写/ nav color #000 font-size 16px a color #0000cc font-size 18px &.first color red
1 2[](https://shq5785.blog.csdn.net/article/details/114214033)Mixin混合 3------------------------------------------------------------------ 4 5`Mixins`是`CSS预处理器`中语言中最强大的特性，简单点来说，`Mixins`可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。 6 7平时你在写样式时肯定有碰到过，某段`CSS`样式经常要用到多个元素中，这样你就需要重复的写多次。在`CSS预处理器`语言中，你可以为这些公用的`CSS`样式定义一个`Mixin`，然后在你`CSS`需要使用这些样式的地方直接调用你定义好的`Mixin`。这是一个非常有用的特性，`Mixins`被当作一个公认的选择器，还可以在`Mixins`中定义变量或者默认参数。 8 9`CSS预编译`工具允许我们将已有的 `class` 和 `id` 的样式应用到另一个不同的选择器上。 如： 10
/Scss、less混合语法/ .circle{ border-radius: 100%; background: #ccc; } .small-circle{ width: 50px; height: 50px; .circle } .big-circle{ width: 100px; height: 100px; .circle } /Stylus Mixin混合语法/ circle{ border-radius: 100%; background: #ccc; } .small-circle{ width: 50px; height: 50px; circle } .big-circle{ width: 100px; height: 100px; circle }
1 2### [](https://shq5785.blog.csdn.net/article/details/114214033)1、混入可以传递参数 3
/* 这是scss样例
- 改成less,只需要变$为@
- 改成Stylus,只需要.circle变为circle */ .circle($radius){ border-radius: $radius; background: #ccc; } .small-circle{ width: 50px; height: 50px; .circle(5px) }
1 2### [](https://shq5785.blog.csdn.net/article/details/114214033)2、混入可带默认值 3
/* 这是scss样例
- 改成less,只需要变$为@
- 改成Stylus,只需要.circle变为circle，：改为= / .circle($radius:5px){ border-radius: $radius; background: #ccc; } .small-circle{ width: 50px; height: 50px; .circle } / 这是Stylus样例 */ circle($radius=5px){ border-radius: $radius; background: #ccc; } .small-circle{ width: 50px; height: 50px; circle }
1 2[](https://shq5785.blog.csdn.net/article/details/114214033)运算 3------------------------------------------------------------- 4
/* 这是Scss样例 / $test:300px; .test_01{ width: $test + 20px;// height: $test2 ; color: #ccc - 10; }
/* 这是Less样例 / @test:300px; .test_01{ width: @test + 20px;// height: @test2 ; color: #ccc - 10; }
/* 这是Stylus样例 / test=300px .test_01{ width: test + 20px;// height: test2 ; color: #ccc - 10; }
1 2[](https://shq5785.blog.csdn.net/article/details/114214033)作用域（`Scope`） 3----------------------------------------------------------------------- 4 5`CSS预处理器`语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是`Scope`（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释这三款CSS预处理器的作用域使用。 6 7### [](https://shq5785.blog.csdn.net/article/details/114214033)`Sass`的作用域 8 9`Sass`中作用域在这三款预处理器是最差的，可以说在`Sass`中是不存在什么全局变量。具体来看下面的代码： 10
/Sass样式/ $color: black; .scoped { $bg: blue; $color: white; color: $color; background-color:$bg; } .unscoped { color:$color; }
1 2先看转译出来的CSS样式： 3
.scoped { color:white;/是白色/ background-color:blue; } .unscoped { color:white;/白色（无全局变量概念）/ }
1 2示例明显的告诉我们，在`Sass`样式中定义变量，调用变量是没有全局变量一个概念存在，因此在`Sass`中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。 3 4### [](https://shq5785.blog.csdn.net/article/details/114214033)`LESS`的作用域 5 6`LESS`中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像`冒泡`一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在`LESS`下所起的变化。 7
/LESS样式/ @color: black; .scoped { @bg: blue; @color: white; color: @color; background-color:@bg; } .unscoped { color:@color; }
1 2转译出来的CSS样式： 3
.scoped { color:white;/白色（调用了局部变量）/ background-color:blue; } .unscoped { color:black;/黑色（调用了全局变量）/ }
1 2### [](https://shq5785.blog.csdn.net/article/details/114214033)`Stylus`的作用域 3 4`Stylus`虽然起步比较晚，但其作用域的特性和`LESS`一样，可以支持全局变量和局变量。会向上`冒泡`查找，直到根为止。 5 6[](https://shq5785.blog.csdn.net/article/details/114214033)函数 7------------------------------------------------------------- 8 9`Sass`、`Less`和`Stylus`都提供了丰富的内置函数，`Stylus`更允许自定义函数，使用的时候自行查询吧。 10 11[](https://shq5785.blog.csdn.net/article/details/114214033)导入 12------------------------------------------------------------- 13 14几种`CSS预编译`语言的导入语法是相同的。与`css3`的`@import`看起来写法也相同，但`css3`的`@import`会引起异步加载。并不是我们期望的。 15 16`CSS预编译器` `@import`解决了这个问题，它能将多个样式文件合并为一个，本质上是方便前端管理代码，并不会异步加载。 17
@import 'reset.scss' //scss中导入样式 @import "reset"; // less导入默认导入为less文件 @import "reset.css" // Stylus导入默认导入为css文件
1 2[](https://shq5785.blog.csdn.net/article/details/114214033)循环语句 3--------------------------------------------------------------- 4 5`Sass`（`Scss`），`Stylus`支持循环语句 6 7[](https://shq5785.blog.csdn.net/article/details/114214033)分支语句 8--------------------------------------------------------------- 9 10`Sass`（`Scss`），`Stylus`支持条件语句 11 12[](https://shq5785.blog.csdn.net/article/details/114214033)拓展阅读 13--------------------------------------------------------------- 14 15* [Sass官网](http://sass-lang.com/) 16* [LESS官网](http://lesscss.org/) 17* [Stylus官网](http://learnboost.github.com/stylus) 18 19 20 21 22 23本文转自 [https://shq5785.blog.csdn.net/article/details/114214033](https://shq5785.blog.csdn.net/article/details/114214033)，如有侵权，请联系删除。