敞开成长之旅！这是我参加「日新计划 12 月更文挑战」的第 14 天，点击检查活动概况
前语
Css作为一门符号忆言语，语法相对简单，对运用者的要求较低，但同时也带来一些问题
需要书写很多看似没有逻辑的代码，不便利保护及扩展，不利于复用，特别对于非前端开发工程师来讲，往往会由于缺少Css编写经验而很难写出组织杰出且易于保护的Css代码
Css预处理器便是针对上述问题的解决方案
预处理言语
扩充了Css言语，增加了比如变量、混合（mixin）、函数等功用，让Css更易保护、便利
本质上，预处理是Css的超集
包括一套自界说的语法及一个解析器，根据这些语法界说自己的款式规则，这些规则最终会经过解析器，编译生成对应的Css文件
CSS预处理言语有哪些
Css预编译言语在前端里边有三大优异的预编处理器，分别是：
- sass
- less
- stylus
sass
2007 年诞生，最早也是最成熟的Css预处理器，拥有 Ruby 社区的支撑和Compass这一最强大的Css框架，目前受LESS影响，现已进化到了全面兼容Css的Scss
文件后缀名为.sass与scss，能够严厉依照 sass 的缩进方式省去大括号和分号
less
2009年出现，受SASS的影响较大，但又运用Css的语法，让大部分开发者和设计师更容易上手，在Ruby社区之外支撑者远超过SASS
其缺点是比起SASS来，可编程功用不够，不过长处是简单和兼容Css，反过来也影响了SASS演变到了Scss的年代
stylus
Stylus是一个Css的预处理框架，2010 年发生，来自Node.js社区，主要用来给Node项目进行Css预处理支撑
所以Stylus是一种新式言语，能够创立健壮的、动态的、赋有表现力的Css。比较年青，其本质上做的工作与SASS/LESS等类似
区别
虽然各种预处理器功用强大，但运用最多的，还是以下特性：
- 变量（variables）
- 效果域（scope）
- 代码混合（ mixins）
- 嵌套（nested rules）
- 代码模块化（Modules）
因而，下面就打开这些方面的区别
基本运用
less和scss
.box {
display: block;
}
sass和stylus
.box
display: block
嵌套
三者的嵌套语法都是一致的，甚至连引用父级选择器的符号 & 也相同
区别只是 Sass 和 Stylus 能够用没有大括号的方式书写
less
.a {
&.b {
color: red;
}
}
变量
变量无疑为 Css 增加了一种有效的复用方式，减少了原来在 Css 中无法防止的重复「硬编码」
less声明的变量必须以@最初，后面紧跟变量名和变量值，并且变量名和变量值需要运用冒号:分离隔
@red: #c00;
strong {
color: @red;
}
sass声明的变量跟less十分的类似，只是变量名前面运用@最初
$red: #c00;
strong {
color: $red;
}
stylus声明的变量没有任何的限制，能够运用$最初，结尾的分号;可有可无，但变量与变量值之间需要运用=
在stylus中咱们不建议运用@符号最初声明变量
red = #c00
strong
color: red
效果域
Css预编译器把变量赋予效果域，也便是存在生命周期。就像js相同，它会先从部分效果域查找变量，顺次向上级效果域查找
sass中不存在全局变量
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
编译后
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色（无全局变量概念）*/
}
所以，在sass中最好不要界说相同的变量名
less与stylus的效果域跟javascript十分的类似，首先会查找部分界说的变量，如果没有找到，会像冒泡相同，一级一级往下查找，直到根为止
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
编译后：
.scoped {
color:white;/*白色（调用了部分变量）*/
background-color:blue;
}
.unscoped {
color:black;/*黑色（调用了全局变量）*/
}
混入
混入（mixin）应该说是预处理器最精华的功用之一了，简单点来说，Mixins能够将一部分款式抽出，作为单独界说的模块，被很多选择器重复运用
能够在Mixins中界说变量或者默认参数
在less中，混合的用法是指将界说好的ClassA中引进另一个现已界说的Class，也能运用够传递参数，参数变量为@声明
.alert {
font-weight: 700;
}
.highlight(@color: red) {
font-size: 1.2em;
color: @color;
}
.heads-up {
.alert;
.highlight(red);
}
编译后
.alert {
font-weight: 700;
}
.heads-up {
font-weight: 700;
font-size: 1.2em;
color: red;
}
Sass声明mixins时需要运用@mixinn，后面紧跟mixin的名，也能够设置参数，参数名为变量$声明的方式
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
stylus中的混合和前两款Css预处理器言语的混合略有不同，他能够不运用任何符号，便是直接声明Mixins名，然后在界说参数和默认值之间用等号（=）来连接
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 调用error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
}
模块化
模块化便是将Css代码分成一个个模块
scss、less、stylus三者的运用方法都如下所示
@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';
结语
本文到此结束，谢谢我们的观看！
如有问题，欢迎各位纠正！
