完整高频题库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/相关问题CSS主要有哪些预处理器？为什么需要使用预处理器？各预处理器优缺点答重点SassLessStylusPostCSS工程化提升效率CSS本身不是可编程语言，随着前端项目越大，CSS维护难度越大。CSS预处理器的作用本质上是为CSS添加一些可编程的特性。通过变量、嵌套、简单的程序逻辑、计算、函数等特性，让CSS更易于维护，通过工程手段提高开发效率。目前主流的CSS预处理器主要有Sass、Less、Stylus、PostCSS。深入知识点1.PostCSS[1]PostCSS是目前最流行的CSS前/后处理器。PostCSS本体功能比较简单，提供了一种用JavaScript处理CSS的方法。PostCSS会将CSS解析成AST（AbstractSyntaxTree抽象语法树），其他插件会有不同的处理方式。FunctionPostCSS主体功能比较简单，大部分CSS处理功能都是由插件提供的，以下是一些常用的插件：Autoprefixer为CSS中的属性添加浏览器特定的前缀。postcss-preset-env根据browserslist指定的目标浏览器，将一些新的CSS特性转换成目标浏览器支持的语法。cssnano提供CSS压缩。postcss-nested提供CSS嵌套功能。postcss-px-to-viewport提供pxtovw功能。postcss-custom-properties支持CSS自定义属性。优点插件系统完善，可扩展。插件功能齐全。生态优良。缺点配置相对复杂。2.Sass[2]在完全兼容CSS语法的前提下，Sass为CSS提供了变量、嵌套、混合、运算符、自定义函数等可编程能力。特性Sass中有几个常用的特性：变量：颜色、字体或任何CSS值都可以存储在变量中。嵌套：CSS选择器可以嵌套，提供清晰的层次结构。混合：可以定义和重用代码块。扩展/集成：可以在另一个选择器中继承一个选择器。运算符：您可以在CSS中使用运算符来执行计算。条件/循环语句：您可以循环/有条件地生成CSS。自定义函数：可以自定义复杂操作的函数。优点是用途广泛。功能支持很完善。可编程性强。缺点CSS的复杂度不可控。node-sass在国内不太好安装（不是sass本身的缺点，dart-sass可以替代）。3.Less[3]Less类似于Sass，完全兼容CSS语法，为CSS提供变量、嵌套、混合、计算等可编程能力。Less是用JavaScript实现的，可以直接在浏览器中使用。在Less中有几个常用的功能：变量：颜色、字体或任何CSS值都可以存储在变量中。嵌套：CSS选择器可以嵌套，提供清晰的层次结构。Mixins：可以定义和重用的代码块。扩展/集成：可以在另一个选择器中继承一个选择器。计算：可以在CSS中执行计算。条件/循环语句：您可以循环/有条件地生成CSS。优点是用途广泛。可在浏览器中运行，轻松实现主题定制功能。缺点是不支持自定义函数（简单的逻辑可以通过mixins实现）。编程能力比较弱。4.Stylus[4]Stylus的基本功能与Sass/Less非常相似。Stylus的特点是冒号、分号、逗号和括号都是可选的，所以你可以写出非常简洁的CSS，例如：bodybackground-color:#000body::aftercontent:'HZFEStudio'color:#ffffont-size:20px延伸阅读1.CSSModules[5]CSSModules不同于上面介绍的预处理器。它不是可编程的CSS，只是在CSS文件中增加作用域和模块依赖，主要解决CSS全局污染的痛点和嵌套太深的问题，解决全局污染。使用示例如下：/*style.css*/.hzfeTitle{color:#666;font-size:20px;}从“./style.css”导入样式;document.body.innerHTML=`
