什么是CSS 预处理器?

html-css012

什么是CSS 预处理器?,第1张

预处理器就是编译css,以前css都是静态的,要写两个class就得写两个class,现在可以加入变量。预处理器会对变量做处理。

后处理器就是对css加入一些扩展,增强css的兼容性。

CSS 预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

CSS预处理器种类繁多,本次就以Sass、Less、Stylus进行比较。

《Less入门系列教程》

Stylus是一个CSS预处理器,提供一种高效、动态和富有表现力的方式来生成CSS。Stylus 比较激进,利用缩进、空格和换行来减少需要输入的字符。不过同时也兼容CSS语法。

基础写法:

编译成CSS:

和CSS 一样,Stylus 允许通过逗号分隔,一次为多个选择器定义属性。

编译成CSS:

&符号代表父级选择器。下面的例子中,(textarea和input)两个选择器的伪类:hover都会改变 color 属性。

编译成CSS: