CSS预处理

一、less,scss,stylus 的特点

1. 都具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；
2. 都支持CSS风格语法，LESS要求一定要使用大括号“{}”，Scss和Stylus可以省略 “{}” 和 “；”通过缩进表示层次与嵌套关系；
3. Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念；
4. Scss和Stylus就具有类似其它语言的条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能；
5. Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
6. 使用LESS时，还可以在引用它的HTML文件中引入从官网下载的“less.js”文件，就可以通过浏览器进行解析。

二、postcss

postcss提供了一种方式可以用 JavaScript 对 CSS进行各种不同的转换和处理，依托强大的插件体系为 CSS 处理增加了无穷的可能性。

三、css 预处理原理

CSS 预处理器用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者可以直接使用这种语言进行 CSS 的编码工作。
简单来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。

四、实战：项目中需要100个类名，作用于pading:1px 至 padding ： 100px区间，用任意CSS预处理器实现。

for i in (1..100)
  .item-{i}
    padding 1px*i

五、番外： vue 中的style 中的scoped 属性是做什么的？原理？

在vue组件中，为了使样式私有化，不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块。
原理：

• 通过给HTML的DOM节点加一个不重复data属性(形如：data-v123a)来表示他的唯一性
• 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v123a]）来私有化样式
• 但是由于权重关系，组件内部的样式会覆盖外部的样式。如果想修改样式就必须加重（增加选择器层级，ID选择器，并列选择器，impotant等）