css 预处理器之 less && sass

前言

日常积累，欢迎指正

什么是 CSS 预处理器?

• 基于 CSS 的另一种语言-CSS 预处理器 与 CSS 有点类似 ES5- 与 ES6+

• 可以通过工具编译成 CSS

• 添加了很多 CSS 不具备的特性

• 能提升 CSS 文件的组织

常见的 CSS 预处理器

• less - 基于 nodeJS 写的 - 优势: js 写的编译速度快并且有一个不需要预先编译可以直接在浏览器中使用的版本,入门相对简单但在一些复杂特性上显得非常繁琐

• sass 以及后面的新版 scss 均统称 sass
  Ruby 写的，编译较慢但是有它相应的解决方案

less 和 sass 特性上基本没有本质区别，写起来和用起来都 差的不多
less\sass 相互移植

CSS 预处理器的好处

• 可以嵌套反应层级和约束

• 变量和计算 - 减少重复代码

• Extend 和 Mixin 代码片段

• 循环的方式生成样式 - 适用于复杂有规律的样式(表格 动画 栅格)

• import CSS 文件模块化

CSS 本来是有 import 的，但因为性能问题不常使用

常见的css预编译器有三种：less 、 sass 、 stylus。

less 与 sass 的对比

见下图