首页 > 代码库 > sass、less、stylus的安装及使用

sass、less、stylus的安装及使用

一、什么是CSS预处器

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

CSS预处理器技术已经非常的成熟,而且也涌现出了很多种不同的CSS预处理器语言,比如说:Sass(SCSS)、LESS、Stylus。

到目前为止,在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀,讨论的也多,对比的也多。本文将分别从他们产生的背 景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。

二、Sass、LESS和Stylus背景介绍

1.Sass背景介绍

Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混 入、函数等功能,可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为 它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

2.LESS的背景介绍

2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写 好的代码转化成标准的CSS代码,在很多流行的框架和工具中已经能经常看到LESS的身影了(例如Twitter的Bootstrap框架就使用了 LESS)。

3.Stylus背景介绍

Stylus,2010年产生,来自于Node.JS社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如Sass和LESS。

Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

三、Sass、LESS和Stylus的安装

1.Sass的安装

到RubyInstaller官网上下载Ruby安装文件(随意选择一个版本),此处选择的是最新版本Ruby1.9.3-p385

Ruby安装文件下载好后,可以按应用软件安装步骤进行安装Ruby。在安装过程中,个人建议将其安装在C盘下,在安装过程中选择第二个选项

Ruby安装完成后,在开始菜单中找到新安装的Ruby,并启动Ruby的Command控制面板

在启动的Ruby命令控制面板中输入下面的命令:

gem install sass

输入上面命令,回车后就会自动安装Sass

这样Sass就安装成功了,也就可以使用了。

2.LESS的安装

LESS的安装和Sass安装有所不同,他不需要依赖于Ruby环境,就能直接安装使用。不过LESS安装分为两种:客户端和服务器端安装。

a)客户端安装:

我们可以直接在客户端使用“.less”(LESS源文件),只需要在官网载一个javascript脚本文件主“less.js”,然后在我们需要引入LESS源文件的html的<head>中加入如下代码:

<link rel="stylesheet/less" type="text/css" href="http://www.mamicode.com/文件路径/styles.less">

<script src="http://www.mamicode.com/文件路径/less.js" type="text/javascript"></script>

需要注意的是:在引入“.less”文件中,“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS源文件一定要在“less.js”引入之前引入,这样才能保证LESS源文件正确编译解析。

b)服务器端安装

LESS在服务器端的使用主要是借助于LESS的编译器,将LESS源文件编译生成最终的CSS文件,目前常用的方式是利用node的包管理器 (npm)安装LESS,安装成功后就可以在Node环境中对LESS文件进行编译。如此一来,LESS在服务器的安装和Sass的安装有点相似,不同之 处是他们需依赖的环境不一样,LESS需要的是Node JS环境,而Sass需要的是Ruby环境

3.Stylus的安装

Stylus的安装和LESS在服务器端的安装很相似,同样依赖于Node JS的环境,也就是说也要先安装Node Js(如果安装Node JS请参考前面的介绍)。唯一不同的是在Node JS的Command控制面板输入的命令不一样:

$ npm install stylus

然后,就会自动下载安装最新的stylus库

四、Sass、LESS和Stylus转译成CSS

1.Sass源文件转译成CSS文件

Sass文件就是普通的文本文件,不过其文件后缀名有两种,一种为“.sass”;另一种为“.scss”。我们一般用“.scss”就好,至于这 两种文件扩展名的区别在于“.sass”是Sass语言文件的扩展后缀名,而“.scss”是SCSS语言文件的扩展后缀名,至于Sass和SCSS的详 细区别这里不做介绍。你可以简单的理解为他们都是CSS预处理器语言,而且两者功能特性都一样,只是书写规则不同而以。

要转译Sass文件的前提是有文件可转,因此先在项目中创建一个Sass文件,此例中将其命名为“style.scss”,并且将其放在对应的项目样式中,如D盘的“www/workspace/Sass/css”目录下。

启动Ruby的Command控制面板,找到需要转译的Sass文件,如此例此文件放置在D盘的“www/workspace/Sass/css”

如果仅针对于单文件的转译,需要将“style.scss”转译成“style.css”,只需要在对应的目录下输入下面的命令:

$ sass style.scss style.css

单文件的监听,只需要在刚才的命令控制面板中输入:

$ sass --watch style.scss:style.css

按下回车键(Enter),这样一来,你只要修改了“style.scss”文件,“style.css”文件就会随着更新变化。

除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具,比如说有名的Compass.app和fire.app。

2.LESS文件的转译成CSS文件

LESS文件的转译和Sass文件转译可以说是大同小异,不同之处是LESS在安装的Node JS环境下通过其自己的命令来进行转译。

$ lessc style.less

上面的命令会将编译的CSS传递给stdout,你可以将它保存到一个文件中:

$ lessc style.less > style.css

除了上面的命令转译LESS源文件之外,现在还有很多第三方开发的工具,比较常见的有:SimpleLess、Less.app、LESS编译辅助 脚本-LESS2CSS、WinLess和CodeKit.app等,我个人现在常用的是WinLess工具,简单易用,不过在IOS系统下 LESS.app和CodeKit.app很好用。

3.Stylus源文件转译成CSS文件

Stylus具有可执行性,因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”,因此Stylus可以像下面转译源文件:

$ stylus –compress  <some.styl> some.css

Stylus也像Sass一样,同时接受单个文件和整个目录的转译。例如,一个目录名为“css”将在同一个目录编译并输出“.css”文件。

$ stylus css

下面的命令将输出到“./public/stylesheets”:

$ stylus css –out public/stylesheets

还可以同时转译多个文件:

$ stylus one.styl two.styl

如果你的浏览器安装了Firebug,那么可以使用FireStylus扩展。

$ stylus –firebug  <path>

五、Sass、LESS和Stylus的语法

每一种语言都有自己一定的语法规则,CSS预处理器语言也不例外,在真正使用CSS预处器语言之前还有一个不可缺少的知识点,就是对语法的理解。值得庆幸的是,这三款CSS预处理器语言的语法和CSS语法都差不多。

1.Sass语法

Sass3.0版本开始使用的是标准的CSS语法,和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写:

/*style.sass新版语法规则*/

h1{

  color:#936;

  background-color:#333;

}

正如你所看到的,在Sass样式中,这样的代码是在简单不过的了。

重要的一点是,Sass也同时支持老的语法,老的语法和常规的CSS语法略有不同,他需要严格的语法,任何的缩进和字符的错误都会造成样式的编译错 误。Sass可以省略大括号({})和分号(;),完全依靠严格的缩进和格式化代码,而且文件使用“.sass”扩展名,他的语法类似于:

/*style.sass*/

h1

  color:#936

  background-color: #333

2.LESS语法

LESS是CSS的一种扩展形式,它并没有阉割CSS的功能,而是在现有的CSS语法上,添加了很多额外的功能。就语法规则而言,LESS和Sass一样,都是使用CSS的标准语法,只是LESS的源文件的扩展名是“.less”,其基本语法类似于:

/*style.less*/

h1 {

  color: #963;

  background-color: #333;

}

3.Stylus语法

Stylus的语法花样多一些,它的文件扩展名是“.styl”,Stylus也接受标准的CSS语法,但是他也像Sass老的语法规则,使用缩进控制,同时Stylus也接受不带大括号({})和分号的语法,如下所示:

/*style.styl*/

/*类似于CSS标准语法*/

h1 {

  color: #963;

  background-color:#333;

}

/*省略大括号({})*/

h1

  color: #963;

  background-color: #333;

/*省略大括号({})和分号(;)*/

h1

  color:#963

  background-color:#333

在Stylus样式中,你也可以在同一个样式文件中使用不同的语法规则,下面这样的写法也不会报错:

/*style.styl*/

h1 {

  color  #963

}

h2

  font-size:1.2em

 

sass、less、stylus的安装及使用