CSS预处理器（框架）：Sass、less、Stylus
前言
问题的引出。页面写完CSS，后期维护时一些css存在，但是标签的class=“”中已经删除的情况。
这个css样式已经被废弃掉了。而解决这种情况，就要用到css框架。先来熟悉一下框架。
一、CSS 预处理器是什么
CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题。例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
二、语法
/* style.scss 或者 style.less
它在color：#e6e6e6代码外侧使用花括号，属性和值之间用‘冒号’分开*/
h1 {
color: #e6e6e6;
}
/* style.sass 没有花括号，并且用‘冒号’隔开 */
h1
color: #e6e6e6
/* style.styl 花括号 存在 或者 不存在 都可以，属性和值之间使用‘空格’或‘冒号’隔开*/
h1 {
color: #e6e6e6;
}
h1
color: #e6e6e6;
h1
color #e6e6e6
三、变量
使用前，在CSS预处理器中声明变量，使用时，在整个样式单中变量都能使用。支持颜色、数值、文本等。/*sass的变量必须是￥开始，然后变量名和值使用冒号分开*/
$bgColor: #ffffff;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $bgColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
/*Less的变量名使用 @ 符号开始*/
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
/*Stylus 对变量名没有任何限定,但在 Stylus 的变量名不要用 @ 开头。*/
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth
四、嵌套
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&;:hover {
text-decoration: underline;
}
}
}
}
嵌套的好处是不需要重复写paren，而且父子节点关系一目了然
五、Mixins (混入)
Mixins 有点像是函数或者是宏，当你某段 CSS 经常需要在多个元素中使用时，你可以为这些共用的 CSS 定义一个 Mixin，然后你只需要在需要引用这些 CSS 地方调用该 Mixin 即可。/*Stylus 的混入语法：*/
/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}
/*最终编译成如下CSS样式：*/
.generic-error {
padding: 20px;
margin: 4px;
border: 2px solid #f00;
color: #f00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
border: 5px solid #f00;
color: #f00;
}
六、继承
当多个元素的样式相同时，经常这样写：p,
ul,
ol {
/* styles here */
}
使用CSS预处理器的写法：
/*在 Sass 和 Stylus 这样写：*/
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block; /* Inherit styles from '.block' */
border: 1px solid #EEE;
}
ul, ol {
@extend .block; /* Inherit styles from '.block' */
color: #333;
text-transform: uppercase;
}
/*在这里首先定义 .block 块，然后让 p 、ul 和 ol 元素继承 .block ，最终生成的 CSS 如下：*/
.block, p, ul, ol {
margin: 10px 5px;
padding: 2px;
}
p {
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
七、导入
很多 CSS 开发者对导入的做法都不太感冒，因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同，它只是在语义上包含了不同的文件，但最终结果是一个单一的 CSS 文件，如果你是通过 @ import "file.css"; 导入 CSS 文件，那效果跟普通的 CSS 导入一样。注意：导入文件中定义的混入、变量等信息也将会被引入到主样式文件中，因此需要避免它们互相冲突。reset.css:
/* file.{type} */
body {
background: #EEE;
}
main.xxx:
@ import "reset.css";
@ import "file.{
type}";
p {
background: #0982C1;
}
最终生成的 CSS：
@ import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}
八、颜色函数
完整的颜色函数列表请阅读 [Stylus Documentation](https://stylus-lang.com/docs/bifs.html).Stylus:
lighten(color, 10%); /* returns a color 10% lighter than 'color' */
darken(color, 10%); /* returns a color 10% darker than 'color' */
saturate(color, 10%); /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */
完整的颜色函数列表请阅读 Stylus Documentation.
实例：
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
九、运算符
你可以直接在 CSS 预处理器中进行样式的计算，例如：
body {
margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}