SASS编译

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

引述

SASS的出现让CSS变得更加有意思。至于SASS是什么?就不在做更多的阐述,因为她并不是一个新鲜的产物,现在在互联网上可谓是铺天盖地。如果你实在想知道SASS是什么?那你只要简单得知道他是CSS预处理器语言的一种。

SASS在CSS的基础上做了一些扩展,使用SASS你可以使用一些简单的编程思想进来编写CSS。比如,SASS中可以定义变量、混合、嵌套以及函数等功能。只不过SASS不像CSS,可以直接运用到项目中,如果你需要将样式运用到项目中,有一个步骤是必须经过的——SASS转译成CSS。

到目前为止,将SASS转译成CSS并不是件困难的事情。可以通过命令行工具或者第三方插件来完成SASS向CSS的转译工作,并且转译出来的CSS代码,格式优美,且符合CSS的标准。

SASS发展到今天,变化非常大,功能也非常强。同时他的语法也有所改变。直到写这篇文章之时,SASS具有两种语法。新的主要语法(SASS 3)称作SCSS (Sassy CSS),同时支持CSS3的语法。也就是说只要CSS3支持的在SCSS中也被支持。SCSS文件扩展名为'.scss',这也是当下使用最多的。

第二种语法是SASS的老语法,也就是SASS。不过这种语法和新的SASS语法——SCSS和CSS语法都略有不同。(为了区别,以后文中出新的SCSS指的是SASS的新语法,文中出现的SASS都是指SASS的老语法)。SASS也被称为缩进语法,主要依靠代码缩进来指定块,而不是使用括号和分号。如此一来,SASS也就是一种严格型语法,任何的缩进和字符错误都会造成样式的编译错误,因此使用SASS需要具备良好的编码习惯与风格。SASS文件扩展名为.sass

SASS虽然有两种语法,但老语法同样还被继承下来,能正常使用。但在下更建议大家使用SASS时直接使用最新的语法SCSS。因为SCSS和CSS的编码风格和语法几乎可以说是一样,这样一来有助于大家更好的学习和使用SASS。

SASS的编译环境

SASS的代码无法直接运用到项目中,要像使用CSS一样,我们就必须将SASS转译成CSS,然后在项目中调用转译出来的CSS。然而转译SASS就需要有一定的生产环境配合,才能完成。这也是玩SASS必须做的第一步。

由于SASS是在Ruby环境下运行,所以大家首先需要在自己的工作电脑上安装Ruby。具体如何安装,此处不做过多的介绍,如果您需要安装的话,可以参阅下面的教程:

在Mac系统下,Ruby一般已内置在其中,如果您不能确认是否已安装,或者说你不知道你的Ruby使用的版本,你可以打开你的命令工具:

$ ruby -v

这样你就能获得相关信息:

#ruby 1.9.3p392(2013-02-22 revision 39386) [x86_64-darwin12.4.0]

注: 上面信息是我电脑中显示的信息。或许在你的电脑中显示的信息将会略有不同。

如果您的系统是Windows,那么下载Ruby的一个安装文件,step by step就搞定了。

SASS的安装

确认运行SASS环境无误之后,我们就可以开始安装SASS了。SASS的安装也可以根据您自己的不同的需求进行不同的安装,其根据用户需求分成三大类安装方法。

标准稳定版安装

在大多数情况和大部分人群中,还是喜欢安装SASS的标准稳定版本,这样使用在项目中风险不会太大,其安装很简单:

$ gem install sass 

有的时候在LinuxOS X系统下,可能需要超级管理员权限才能安装:

$ sudo gem install sass

安装完成后,可以通过下面的命令查看SASS是否安装成功:

$ gem list

如果您在这份list中,看到SASS的存在:

…
sass (3.2.9)
…

说明您已安装成功。这个时候你或能不知道SASS版本是多少,你也可以查看他的版本:

$ sass -v

可以看到SASS版本信息:

Sass 3.2.9 (Media Mark)

Beat版本安装

对于SASS的发烧友来说,一个稳定版本并不能满足需求,他需要一些别的东西,也就是说他想获取SASS的一些最新变化和最新功能。那么这个时候你就可以安装一个Beat版本的SASS,他会自己会自动创建每次更改的主分支:

$ gem install sass --pre

从Git库中安装

SASS也可以直接从Git库中安装:

$ git clone git://github.com/nex3/sass.git
$ cd sass
$ rake install

从实际使用的角度来说,建议按第一种方法安装。Windows系统下安装SASS,可以点击这里

安装SASS库

使用SASS制作东西时,我们可以借助一些成熟型的SASS库,帮助我们快速开发,提高效率。目前比较成熟的SASS库有CompassBourbon。接下来,简单看看这两个库怎么来安装。

安装Compass库

Compass是一个非常成熟的SASS库,可是一个很强大的框架,使用的频率也相当的高。如果您了解了Compass,那么他将会让你受益无穷。同样的,在你的项目中使用Compass,需要先安装Compass。

$ gem install compass
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-compile.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部