CoderBlog

# CSS 预处理器

# 一、介绍

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

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

# 二、分类

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

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

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

Sass 是一个 CSS 预处理器，完全兼容所有版本的 CSS。实际上，Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码，节省开发时间。下面就来看看 Sass 中常用的功能。

# 三、SASS

# 1. 注释

在 Sass 中支持两种类型的注释：

// 注释一

/* 注释二 */
1
2
3

需要注意，当 Sass 编译成CSS时，第一种注释不会编译到CSS中（只在Sass文件中可见），第二种注释会编译到CSS中。

# 2. 嵌套

嵌套的写法是Sass的一大特点，通过嵌套这些代码，可以得到类似HTML结构的CSS代码，使代码更具可读性。

nav {
    background : #C39BD3;
    padding : 10px;
    height: 50px;
  
    ul {
        display: flex;
        list-style : none;
        justify-content: flex-end;

        li {
            color: white;
            margin-right: 10px;
        } 
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

那为什么要使用嵌套呢？在CSS中，如果想为其父元素的继承元素定义样式，就必须每次都选择父元素：

html, body {
    height: 100%;
}

html #root, body #root {
    height: 100%;
}

html .div-with-button, body .div-with-button {
    background-color: black;
}

html .div-with-button button, body .div-with-button button {
    background-color: #e4c681;
}

html .div-with-button button:hover, body .div-with-button button:hover {
    background-color: #ffe082;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在Sass中就可以这样写，这样写就会使代码更加清晰、条理和简洁：

html, body {
  height: 100%;

  #root {
    height: 100%;
  }

  .div-with-button {
    background-color: black;

    button {
      background-color: #e4c681;

      &:hover {
        background-color: #ffe082;
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意，在编写Sass时，要嵌套嵌套太深，尽量不要超过三层，超过之后就会导致代码难以维护，并且在编译为CSS时就会出现不必要的选择器，就会导致CSS文件变大。

我们还可以在嵌套中使用 &，比如鼠标在按钮上悬浮时，改变颜色。在CSS中是这样的：

button {
  background-color: #535353;
  color: #000;
}
button:hover {
  background-color: #000;
  color: #fff;
}
1
2
3
4
5
6
7
8

在Sass中就可以这么写：

button {
  background-color: #535353;
  color: #000;
  &:hover {
    background-color: #000;
    color: #fff;
  }
}
1
2
3
4
5
6
7
8

通常，& 总是指向它上面的元素，可以用于伪类和伪元素：

.box {
  &:focus{} 
  &:hover{}
  &:active{}
  &:first-child{} 
  &:nth-child(2){}
  &::after{} 
  &::before{} 
}
1
2
3
4
5
6
7
8
9

编译后的CSS代码如下：

.box:focus{} 
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{}
.box::before{}
1
2
3
4
5
6
7

此外，如果类以相同的词开头（比如box-yellow和box-red），就可以嵌套它们：

.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}
1
2
3
4
5
6
7
8
9
10
11

编译成CSS就是这样的：

.box-yellow {
  background: #ff6347;
}
.box-red {
  background: #ffd700;
}
.box-green {
  background: #9acd32;
}
1
2
3
4
5
6
7
8
9

Sass还支持使用:来嵌套属性：

add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}
1
2
3
4
5
6
7
8

上面的代码编译为如下CSS：

.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
1
2
3
4
5
6

# 3. 变量

变量是用来储存数据的，在Sass中，我们可以将任何有效的CSS值保存在变量中。变量使用$符号定义：

$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;

$font-p: 13px;
$font-h1: 28px;

$base-font: 'Noto Sans KR', sans-serif;
1
2
3
4
5
6
7
8
9
10

变量的使用：

body {
    background-color : $bg-color;
    font-size : $font-p;
    font-family : $base-font;
}

h1 {
    font-size: $font-h1;
    color: $black;
}

p {
    font-size: $font-p;
    color: $black;
}

a {
    color: $link-color;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

当Sass编译成CSS时，所有的变量都会被替换为定义的变量值。变量可以减少重复、进行复杂的数学运算等。

需要注意，CSS变量是有范围的，位于顶层的变量都是全局变量，在块中定义的变量都是局部变量。全局变量可以在任何地方使用，局部变量只能在变量定义的块中使用。

$my-global-variable: "global";

div {
  $my-local-variables: "local";
}
1
2
3
4
5

变量值是可以覆盖的：

$color: #fefefe;
.content {
  background-color: $color;
}

$color: #939393;
.footer {
  background-color: $color;
}
1
2
3
4
5
6
7
8
9

在上面的代码中，content的背景颜色是#fefefe，而footer的背景颜色是#939393。要想改变全局变量，就需要添加!global修饰符：

$color: #111;
.content {
  $color: #222;
  background-color: $color;
}
.footer {
  $color: #333 !global;
}
1
2
3
4
5
6
7
8

除此之外，Sass变量是可以指定默认值的：

$message-color: blue !default;

.message {
    color: $message-color;
}
1
2
3
4
5

编译成的CSS代码如下：

p.message {
  color: blue;
}
1
2
3

我们可以在 @import 之前覆盖模块默认值：

$message-color: black;
@import 'my-module';

.message {
    color: $message-color;
}
1
2
3
4
5
6

编译成的CSS代码如下：

p.message {
  color: black;
}
1
2
3

也就是说，带有 !default 的变量只有在没有值的情况下才会生效。

# 4. Mixins 和 Include

mixin 是一组可以重用的 CSS 声明，语法类似于JavaScript中的函数，使用 @mixin 指令来代替 function 关键字。调用 mixin 是通过 @include 语句完成的。

以下是用 mixins 使元素水平垂直居中的方法：

@mixin absolute-center() {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.element {
  @include absolute-center();
}
1
2
3
4
5
6
7
8
9
10

当然，mixin也是支持传递参数的：

@mixin square($size) {
  width:$size;
  height:$size;
}
div {
  @include square(60px);
  background-color:#000;
}
1
2
3
4
5
6
7
8

参数可以是可选的，可选参数的定义和Sass变量的定义形式是一样的：

@mixin square($width: 50px) {
  width:$size;
  height:$size;
}
1
2
3
4

我们还可以将 CSS 规则传递给 mixins。 这些规则可以在使用 @content 的 mixin 中使用。

@mixin hover-not-disabled {
  &:not([disabled]):hover {
    @content;
  }
}
.button {
  border: 1px solid black;
  @include hover-not-disabled {
    border-color: blue;
  }
}
1
2
3
4
5
6
7
8
9
10
11

这样mixin中的@content在编译后就会变成border-color: blue;这样写有助于减少&:not([disabled]):hover部分的重复。

# 5. @import 和 @use

在CSS中我们通常会创建多个CSS文件并在需要时引入：

<link rel="stylesheet" href="/path/to/css/1"></link>
<link rel="stylesheet" href="/path/to/css/2"></link> 
<link rel="stylesheet" href="/path/to/css/3"></link>
1
2
3

这样做会使浏览器发出多个HTTP请求，从而在一定程度上降低应用的速度。而Sass会在代码发动到浏览器之前进行代码组合，这样只需要请求一个CSS文件。

下面来看看如何使用 @import 将文件分块并导入到一个父文件中：

body {
  padding:0;
  margin:0;
}

body, html {
  width:100%;
  min-height:100%;
}
@import 'normalize';

content {
  max-width:660px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

假设 normalize.scss 和 styles.scss 都在同一个文件夹中，可以将一个导入另一个，如上所示。在使用@import时，所有变量、mixin 等都可以全局访问，因为一切都是全局的，所以库必须为其所有成员添加前缀以避免命名冲突。因此不建议使用 @import。

可以使用 @use 来代替，它的基本用法与@import 相同：

@use 'normalize';

content {
  max-width:660px;
}
1
2
3
4
5

使用 @use 导入的文件称为模块。 要使用这些模块的 mixin 或变量，必须使用命名空间来调用它们。 默认情况下，命名空间是文件名（不带扩展名）。

$accent-color: #535353;
@mixin dark-background {
  background-color:#000;
  color:#fff;
}
@use 'src/colors';
body {
  color: colors.$accent-color;
}
.dark-region {
  @include colors.dark-background;
}
1
2
3
4
5
6
7
8
9
10
11
12

还可以使用 as 来使用自定义命名空间：

@use 'src/colors' as c;
body  {
  color: c.$accent-color;
}
1
2
3
4

当 _ 被添加到 SCSS 文件的文件名前时，解析器知道它是一个部分文件并且它仅用于导入。 导入时，_ 部分是可选的。 注意，这里使用 src/colors 来导入 src/_colors.scss。

# 6. 算术运算符

在CSS中可以使用calc()进行数学计算，Sass 支持直接使用+、-、/、*、% 操作符对值和变量进行计算：

$content-width: 600px;
content {
  width:$content-width;
}
.inner-content {
  width: $content-width - 60px; 
}
.outer-content {
  width: $content-width + 60px;
}
1
2
3
4
5
6
7
8
9
10

# 7. 流程控制

在 Sass 中有四种类型的流程控制规则：@if /@else、@each、@for 和@while。其中 @if 和 @else 类似于 JavaScript 中的 if 和 else。

@mixin theme($is-dark: false) {
  @if $is-dark {

  }
  @else {
    
  }
}
1
2
3
4
5
6
7
8

@each 类似于 JavaScript 中的 for of：

$sizes: 40px, 50px, 80px;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
1
2
3
4
5
6
7
8

注意：#{$size} 表示法用于使用变量制作动态属性名称和选择器，这称为插值。

@for 类似于 JavaScript 中的 for 循环：

@for $i from 1 through 4 {
  .bubble-#{$i} {
    transition-delay: .3 * $i;
  }
}
1
2
3
4
5

@while（不常用）类似于 JavaScript 中的 while 循环。

# 8. 扩展/继承

有时需要编写一个仅用于扩展的样式规则。 在这种情况下，可以使用占位符选择器，它看起来像以 % 而不是 . 开头的类选择器。

%flex {
  display: flex;
}

.some-class {
  height: 50%;
  background-color: black;
}

%flex_with_color {
  @extend %flex;
  @extend .some-class;
}

%button_styles {
  height: 50px;
  width: 200px;
}

div {
  @extend %flex_with_color;

  button {
    @extend %button_styles;
    color: #424242;
    background-color: #d966fb;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

上面的代码编译成CSS之后将是这样的：

div {
  display: flex;
}

.some-class, div {
  height: 50%;
  background-color: black;
}

div button {
  height: 50px;
  width: 200px;
}

div button {
  color: #424242;
  background-color: #d966fb;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 9. 媒体查询

在Sass中可以这样来使用媒体查询：

body {
    article {
        p {
            font-size: 100%;
            color: black;
            padding: 10px;

            @media (max-width: 768px) {
                font-size: 150%;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

编译成的CSS代码如下：

body article p {
  font-size: 100%;
  color: black;
  padding: 10px;
}

@media (max-width: 768px) {
  body article p {
    font-size: 150%;
  }
}
1
2
3
4
5
6
7
8
9
10
11

媒体查询是支持嵌套的，并将所有适用的查询与 and 运算符结合起来：

p {
    @media (max-width: 768px) {
        font-size: 150%; 
        @media (orientation: landscape) {
            line-height: 75%; 
        }
    }
}
1
2
3
4
5
6
7
8

编译成的CSS代码如下：

@media (max-width: 768px) {
  p {
    font-size: 150%;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  p {
    line-height: 75%;
  }
}
1
2
3
4
5
6
7
8
9
10
11

# 四、LESS

# 1.安装编译与依赖

  1. 安装：npm install -g less
  2. 手动编译：lessc demo.less demo.css 在demo.less文件下运行可以进行.less文件的编译
  3. 在webpack中使用要配合对应的less-loader使用：less@3.9.0 less-loader@4.1.0
  4. 如果是 .vue 文件要在 style 标签上增加属性 lang="less"
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2、变量

@width: 10px;
@height: @width + 10px;  //允许直接进行运算

#header {
  width: @width;
  height: @height;
}

//编译后
#header {
  width: 10px;
  height: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3、混合

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

.bordered {
  border-top: dotted 1px black;
}

#menu a {
  color: #111;
   // 将类名 bordered 中的代码混入,不要忘记结尾的分号
  .bordered(); // 或者写成.bordered;
}

//编译后
.bordered {
  border-top: solid 1px #000;
}

#menu a {
  color: #000;
  border-top: solid 1px #000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 3.1、带参的less混合

less混合可带参数（可多个）
.border2(@border_width){
  border:@border_width solid #aaa;
}
.box2{
  .border2(30px;)
}
//编译后
.box2{
  border:30px solid #aaa;
}

less混合带默认值（可多个）
.border3(@border_width:10px){
  border:@border_width solid #aaa;
}
.box3{
  .border3()
  }
      
//编译后 
.box3{
  border:10px solid #aaa;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 4、嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力

.demo {
    margin: 0 auto;
        display: flex;
        > .item { // > 表示上一级的子元素
            color: #000;
        }
    }
}

//编译后
.demo {
    margin: 0 auto;
  }
.demo .box {
    display: flex;
  }
.demo .box .item {
    color: #000;
  }

//伪选择器（pseudo-selectors）与混合（mixins）一同使用
.clearfix {
  display: block;
  zoom: 1;

  &:after {   //& 表示当前选择器的父级
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 4.1 @规则嵌套和冒泡

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

//编译后
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
//美中不足的是每一个类名都会单独编译出一个@media，多个相同条件的媒体查询不会进行合并。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 5、运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
1
2
3
4
5
6
7
8
9
10
11

# 6、转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

//编译后
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}
//从 Less 3.5 开始，可以简写为：
@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 7、函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册 (opens new window)中有详细介绍。

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); //  0.5 转换为 50%
  color: saturate(@base, 5%);  //  颜色饱和度增加 5%
  background-color: spin(lighten(@base, 25%), 8);  //颜色亮度降低 25% 并且色相值增加 8 
}
1
2
3
4
5
6
7
8

# 8、映射

从 Less 3.5 版本开始，你还可以将 混合（mixins）和规则集（rulesets） 作为一组值的映射（map）使用

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

//编译后
.button {
  color: blue;
  border: 1px solid green;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 9、作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}


//混合（mixin）和变量的定义不必在引用之前事先定义。故下面的 Less 代码示例和上面的代码示例是相同的：
@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 10、导入

可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";
1
2

← CSS 架构设计 →