sass + less【CSS 知识汇点4】随着前端工程化的完善，css 预处理器已经成为项目不可缺少的部分，绝大部分的

随着前端工程化的完善，css 预处理器已经成为项目不可缺少的部分，绝大部分的前端工程脚手架也内置了一系列的 css 预处理的模版。

市面上有很多 css 预处理器可供选择，且绝大多数的 css 预处理器都会增加一些原生 css 不具备或不完善的高级特性，这些特性让 css 的结构更加具有可读性且易于维护。当前社区代表的 css 预处理器，主要有以下几种：

页面越来越复杂，需要还在的 css 文件也越来越大，我们有必要把大文件切分开，css 预处理器扩展了 @import 指令的能力，通过编译环节将切分后的文件重新合并成一个大文件

把文件切分的思想再向前推进一步，就是“模块化”。一个大的 css 文件在合理切分后，所产生的小文件之间的关系应该是一个树形结构。

树形结构的根结点是“入口文件”，树形的其他节点是“模块文件”。入口文件通常会依赖多个模块文件，各个模块文件也可能会依赖其他更末端的模块，从而构成整个树形

选择符且套语法可以很容易地表达出规则之间的层级关系

nav {
  li {
    a {
    
    }
  }
}

当某个特定的值在多处用到时，变量就是一种简单而有效的抽象方法，可以把这种重复消灭掉。这对换肤功能很有用。

光有变量还不够，我们还需要运算，让值和值建立关联

把常用的运算抽象出来，我们就得到了函数，开发者可以自定义函数，也可以用预处理器内置的函数。