什么是 CSS 预处理器

  • CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作；
  • 通俗的说，”CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加⼀些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

CSS 预处理器的特点

  • 基于css的另一种语言
  • 通过工具编译成CSS
  • 添加了很多CSS不具备的特性
  • 能提升CSS文件的组织

CSS 预处理器的作用

  • 帮助更好地组织CSS代码
  • 提高代码复用率
  • 提升可维护性

CSS 预处理器的优缺点

  • 优点：提高代码复用率和可维护性
  • 缺点：需要引入编译过程 有学习成本

CSS 预处理器的能力

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

CSS 预处理器语言

  • 预处理种类：
    • Sass（SCSS）
    • Less
    • Stylus
    • Turbine
    • Swithch CSS
    • CSS Cacheer
    • DT CSS
  • 到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀，讨论的也多，对比的也多；

CSS 预处理器的框架

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于产品、设计、开发的问题和看法，还有技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程

了解更多

目录

  1. 1. 什么是 CSS 预处理器
  2. 2. CSS 预处理器的特点
  3. 3. CSS 预处理器的作用
  4. 4. CSS 预处理器的优缺点
  5. 5. CSS 预处理器的能力
  6. 6. CSS 预处理器语言
  7. 7. CSS 预处理器的框架