首先,什么是css预处理器?它存在的作用是什么?
用过css(Cascading Style Sheet 级联样式表)的人都会知道,css不是一种编程语言。你可以用它来编写页面的样式,但却无法用它来进行编程。可以理解为,css是设计师的工具,却不是程序猿的工具。
css预处理器就是为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
简单来说,css预处理器用一种专门的编程语言,进行web页面样式设计,然后再编译为正常的css文件,以供项目使用。无需考虑浏览器的兼容问题。
可以在css预处理中使用便量、简单的逻辑程序、函数等到,可以让你的css更加简洁。适应性强、可读性更佳,更易于代码的维护等。
目前为止,最优秀的css预处理器为Sass、Less、Stylus
Sass
2007年,最早最成熟的一款css预处理器语言,可以使用变量、常量、嵌套、函数、混入等功能,可以更有效地有弹性的写出css。Sass最后还是会编译出合法的css让浏览器使用,也就是说它本身的语法不太容易被浏览器识别,因为他不是标准的css格式,更像是一种极其简单的动态语言。它是用Ruby语言编写的,但两者的语法没有关系,安装环境是Ruby. 如果是ios系统,那就无须再安装Ruby,如果是windows系统,需要先安装Ruby,然后再安装sass。
安装是: gem install sass;
编译为css是 :
单文件:sass style.scss style.css
监听: sass --watch style.scss:style.css
Less
2009年开源的项目,受Sass的影响,让更多的开发者和设计师更容易上手,可以将写好的代码转化成标准的css代码,例如Bootstrap框架就使用了Less。维基百科上介绍,其实less是亚力克西斯塞利尔受Sass的影响创建的一个开源项目。安装环境为node。
客户端可以直接官网下载less源文件,引入html,在<head></head>加入如下代码:
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less"> <script src="文件路径/less.js" type="text/javascript"></script>
注意:less源文件一定要在less.js引入之前引入,这样才能保证less源文件正确编译解析。
服务器端安装:npm install less;
编译为css是 :
单文件:lessc style.less
监听: lessc style.less > style.css
Stylus
2010年产生,来源于node.js社区,主要用来给Node项目进行css预处理支持。
他被称为是一种革命性的新语言,提供一个高效、动态、和使用表达式来生成css,以供浏览器使用,同样支持缩进和css常规样式书写规则。
同样依赖于node环境。 npm install stylus
编译为css是 :
stylus -compress <some.styl> some.css
style.css
style css -out public/stylesheets
多个文件:stylus one.styl two.styl