介绍

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。

• 嵌套 反映层级和约束
• 变化和计算 减少重复代码
• Extend 和 Mixin代码片段
• 循坏 适用于复杂有规律的样式
• import CSS文件模块化

分类

• Sass：2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。sass 中文文档Sass 参考手册

  • Sass 和 Scss 的异同

• Less：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。Less 中文文档

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

SCSS

在线编译器https://www.sassmeister.com/

嵌套

.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

• & 表示当前选择器的父级

  https://www.sass.hk/skill/sass45.html

• @at-root

  https://www.sass.hk/skill/sass40.html

.parent {
  ...
  @at-root .child { ... }
}
//输出为
.parent { ... }
.child { ... }

变量

$width: 10px;

Mixin

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}
.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}

@content用在mixin 里面的，当定义一个mixin 后，并且设置了@content；
@include的时候可以传入相应的内容到 mixin 里面

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}
编译后：
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

Extend

继承

• sass

  .subClassOne{
    @extend .parentClass;
  }

Loop

• sass ```less @mixin gen-col($n){ @if $n > 0{ @mixin gen-col($n - 1); .col-#{$n} {

  width: 100px + 12*$n ;

  } } }

@mixin gen-col(12);

//直接使用for循坏 @for $i from 1 throught 12 { .col-#{$i} { width: 100px + 12*$i ; }

<a name="QCybE"></a>
## Function
- SASS允许用户编写自己的函数。
```css
@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}

import

@import "xxx";

LESS

变量

@width: 10px;

Mixin

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}

Extend

.parentClass{
    color:red;
}
.subClassOne{
    &:extend(.parentClass);
}
.subClassTwo:extend(.parentClass){
}
//编译后
.parentClass,
.subClassOne,
.subClassTwo {
  color: red;
}

Loop

• less 使用递归 ```less .gen-col(@n) when(@n > 0){ .gen-col((@n - 1)); .col-@{n} {

  width: 100px + 12*@n ;

  } }

.gen-col(12);

<a name="gTIgX"></a>
## import
```less
@import "xxx";

CSS预处理器框架

• SASS - Compass
• Less - Lesshat / EST
• 提供现成的mixin
• 类似JS类库 封装常用功能