β

SASS编译

携程UED 1191 阅读

引述

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 

通过上面一行简单的命令你就完成了对Compass的安装,你在gem对应的清单中就能看到compass的存在:

$ gem list 

显示结果:

… compass (0.12.2) … 

安装Bourbon库

Bourbon的盘安装和Compass库的安装非常的类似,也非常简单,只需要通过gem命令在你的命令终端运行下面的命令:

$ gem install bourbon 

创建你的第一个SASS项目

具备了上面的知识后,我们开始来实践自己的第一个SASS项目,在这里也将分成三个部分来介绍。

干净的SASS项目

所谓的“干净的SASS”项目指的就是不使用其他任何SASS库,简单点说,就是项目先在SASS中开发,然后转译成CSS。我们来看看这样的项目是如何创建的。

首先进入到你本地项目目录下,我的一般放在Sites中,如下所示:

$ cd Sites 

这个时候就进入了项目目库中:

/Users/airen/Sites 

例如我们要创建一个项目,其名称叫作“mySass”:

$ mkdir mySass 

此时mySass这个项目就在/Users/airen/Sites中了,要是你不放心,你可以使用ls命令查验一下:

$ ls 

为了让项目规化的更完美一些,我把.scss的SASS文件都放在sass目录中,而需要转译出来的.css文件都将放在css目录中。因此,我们还需要在mySass项目中创建sasscss两个文件夹:

$ cd mySass $ mkdir sass $ mkdir css 

接下来打开你的编辑器,新建一个文件,并且在里面编辑一段简单的SASS代码,如下所示:

$main-color: #ce4dd6; $style: solid; .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: 1px $style; } } 

并且将此文件命名为style.scss保存在mySass/sass下。

Compass创建SASS项目

上面简单的介绍了一个净身的SASS项目,简单就不用说了。接下来我们一起看看如何通过Compass来创建一个SASS项目。

同样打开你的命令终端,并且进入到Sites目录下。例如我们要创建一个compassSass的项目放在Sites目录下,我们就可以这样做:

$ compass create compassSass 

这句命令一完,你的终端中会出现很多信息,首先会告诉你创建了一个compassSass项目,并且自动在这个项目中创建了哪些文件:

+compassSass |--+sass |-----screen.scss |-----print.scss |-----ie.scss |--+stylesheets |-----ie.css |-----print.css |-----screen.css |---config.rb 

除了创建了相关文件之外,还会告诉你一些其他的信息。其中有一个config.rb文件非常重要,其主要是用来配置Compass创建的项目运行环境。所以在修改这个配置文件的时候,大家需要小心处理。

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

这样你就可以在sass目录中创建你需要的.scss文件,你也可以直接在screen.scss文件中编辑SASS代码。例如此处,将上例中style.scss的SASS代码放置在screen.scss中。

/* Welcome to Compass. * In this file you should write your main styles. (or centralize your imports) * Import this file using the following HTML or equivalent: * <link href="http://ued.ctrip.com/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ @import "compass/reset"; $main-color: #ce4dd6; $style: solid; .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: 1px $style; } } 

在Compass创建的项目中,会自动通过@import导入样式

@import "compass/reset"; 

另外,如果你不想使用SCSS,只想着旧人,不爱新欢,那么你可以在后面添加一个参数-x sass

$ compass create compassSass -x sass 

Bourbon创建SASS项目

Bourbon创建SASS项目和前者都略有不同。他创建SASS项目的思路是,先在对应的目录下创建好项目,然后在把bourbon导入到对应的项目中。

例如此处我们创建了一个bourbonSass项目,同样将此项目放置在Sites目录下,那么我们可以这样来操作:

$ cd ~/Sites $ mkdir bourbonSass $ cd bourbonSass 

接下为需要做的是将bourbon库插入到bourbonSass库中:

$ bourbon install 

这样一来,bourbon库自动会在你的项目bourbonSass中插入一个文件目录bourbon,在这个目录中放置了bourbon库的一些变量。建议大家在使用的时候不要轻意去修改bourbon目录中的变量文件,因为这样你可以随时的更新这个库:

$ bourbon update 

为了能更好的管理您自己的SASS文件以及转译出来的CSS文件,我建议您在bourbonSass项目中在创建sasscss目录,用来放置您自己的.scss文件,以及转译出来的.css文件:

$ mkdir sass $ mkdir css 

这个时候,你就可以在sass目录中创建一个你自己需要的.scss文件,比如screen.scss

这样一来,你就可以直接引用bourbon中的一些变量:

@import "bourbon/_bourbon.scss"; 

你要是不想引用bourbon库中的变量文件,你也可以将自己的SASS样式写到这个文件中。

@import "bourbon/_bourbon.scss"; $main-color: #ce4dd6; $style: solid; .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: 1px $style; } } 

SASS文件转译

上面花了点篇幅,大家知道了如何创建一个SASS的项目,而且项目中都建立了自己需要的.scss文件。可是大家都懂的,SASS只能在Ruby下运行,无法直接引用到项目中,所以要使用SASS给大家带来便利的开发,就必须知道如何将.scss文件转译成.css文件。

接下来,我们依旧针对前面三种方法,对应的了解一下,如何将.scss转译成.css

普通SASS的转译方法

首先来看第一种,我把这种转译方法称为普通转译方法,也是就要针对没有嵌入任何第三方SASS库创建的项目。

转译.scss文件,我们主要使用的是sass命令。其操作非常简单,首先进入到对应的项目中,比如这里,先要进入mySass项目中:

$ cd ~/Sites/mySass 

然后输入转译命令:

$ sass sass/style.scss css/style.css 

这样一来,我们把sass/style.scss转译出来的style.css放入了css目录之下。为以验证,我们有没有转译成功,我们可以进入css目录,查看有没有style.css样式文件,并且查看转译出来的css样式:

$ vi css/style.css 

注:我们当前所在的位置是Sites/mySass

转译出来的CSS样式为:

.navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; } a:hover { border-bottom: 1px solid; } 

使用sass转译.scss文件,有一个不足之处,就是我们修改了.scss文件,不会自动转译。这样一来,我们要时时查看转译出来的CSS样式就非常的蛋疼。那么有没有一个比较好的方法吗?有的,我们只需要在sass命令的基础上添加一个参数--watch就可以。

为了验证这样的说法,我们先把刚才转译出来的style.css删除,然后通过sass --watch命令重新转译一回:

$ sass --watch sass/style.scss 

这样一来,你可以看到提示:

>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite sass/style.css 

sass/style.scss转译到sass/style.css下,并没有转到css目录中,这是他不足的一处。转译出来的在不在css目录下,我想你并不会太在意(大不了到时copy一下),而关心的是,他是不是如前面所说的,可以时间监控转译.scss文件。为了验证这个功能是有效的,我们来修改一下style.scss文件:

$main-color: #ce4dd6; $style: solid; $font-size: 2em;//新增加的sass样式代码 .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; font-size: $font-size;//新增加的sass样式代码 &:hover { border-bottom: 1px $style; } } 

此时我们,不在命令终端敲转译命令了,如果你没有忘记的话,刚才我们开启了时时监控功能,我们来先看一下命令终端的变化吧:

>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite sass/style.css >>> Change detected to: /Users/airen/Sites/mySass/sass/style.scss overwrite sass/style.css 

明显看出终端的变化,那么看看style.css是否有变化:

.navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; font-size: 2em;/*转译出来的新样式代码*/ } a:hover { border-bottom: 1px solid; } 

我想不用我说了吧,事实证明一切。这个时候如果你想停止这样的时时监控转译,你只需要在命令终端输入Ctrl -C即可。

虽然sasssass --watch都达到我们转译.scss文件功能,但在实际项目中,我们的项目中不可能只存有一个.scss文件。所以我们需要一种方法,可以同时将多个.scss文件转译成.css文件。其实在SASS中,可以直接将整个目录中的所有.scss文件转译成所有的.css文件,并放到另一个CSS目录中,其命令如下所示:

$ sass --watch sass/:css/ 

这样一来,只要是sass中所有的.scss文件都可以转译成.css文件,并且都放在了css目录中。

特别强调:如果使用sass --watch转译.scss样式,首先需要安装rb-fsevent,如果没有安装就执行sass --watch将无法执行时时监控.scss转译成.css。例如,在没有安装rb-fsevent时执行下面的转译命令:

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

命令终端将会提出报警信息:

>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite test.css Missing dependency 'rb-fsevent' (version '~> 0.9')! Please run the following to satisfy the dependency: gem install --version '~> 0.9' rb-fsevent For a better performance, it's recommended that you satisfy the missing dependency. Listen will be polling changes. Learn more at https://github.com/guard/listen#polling-fallback. 

为了能让sass --watch命令运行正常,也就是时时能监控,只需要安装rb-fsevent即可:

$ gem install --version `~>0.9` rb-fsevent 

这个时候将在执行:

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

不会出现任何问题。

转译Compass创建的SASS项目

Compass库创建的SASS项目与没有用任何SASS库创建的SASS项目略有不同,那么其转译SASS的方法也是有所不同。接下来我们一起来看看Compass创建的SASS项目应该如何转译。

Compass库创建的SASS项目,转译方法并不复杂。首先我们需要先进入Compass库创建的项目内,例如我们此例,先进入compassSass项目:

$ cd ~/Sites/compassSass 

然后通过下面命令可以将项目中sass目录下所有的.scss文件转译成.css文件,并放置在stylesheets目录下:

$ compass watch 

此时命令终端,会显示转译的相关信息:

>>> Change detected at 23:35:12 to: screen.scss overwrite stylesheets/screen.css >>> Compass is watching for changes. Press Ctrl-C to Stop. 

同样,如果你想停止sass目录下的.scss文件时时转译,只需要在终端中输入Ctrl -C即可。

转译出来的样式如下:

/* line 11, ../sass/screen.scss */ .navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } /* line 18, ../sass/screen.scss */ a { color: #ce4dd6; } /* line 20, ../sass/screen.scss */ a:hover { border-bottom: 1px solid; } 

如果你修改了screen.scss中的样式,会自动转译出相应的样式:

$main-color: #ce4dd6; $style: solid; $font-size: 2em;//添加的scss样式 .navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; font-size: $font-size;//添加scss样式 &:hover { border-bottom: 1px $style; } } 

当你保存了修改的screen.scss文件后,命令终端会自动监控到,并做出相应的变化:

>>> Change detected at 23:45:35 to: screen.scss overwrite stylesheets/screen.css 

同时转译出来的样式也会做相应的变化:

/* line 12, ../sass/screen.scss */ .navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } /* line 19, ../sass/screen.scss*/ a { color: #ce4dd6; font-size: 2em;/*转译后样式*/ } /* line 22, ../sass/screen.scss */ a:hover { border-bottom: 1px solid; } 

而使用bourbon库创建的SASS项目,将.scss样式转译成.css样式,和普通SASS项目转译样式的方法一致。

CSS转译成SASS

既然.scss能通过sass命令转译成.css样式,那么我们是否可以将.css转译成.scss呢?事实是可以的,我们可以通过sass-convert命令:

$ sass-convert css/style.css style.scss 

sass-convert除了可以将.css样式转译成.scss文件之外,还可以通过这个命令对.sass.scss之间样式转译。

sass命令使用

通过sass命令,我们可以完成.scss.css之间转译,为了能更好的了解sass命令,大家需要对sass命令做一个全面的了解,如果你对sass命令并不熟悉,可以在命令终端输入:

$ sass -help 

这样就会列出所有sass命令所有参数的使用规则。

sass语法

sass命令语法非常简单:

 sass [options] [input] [output] 

sass命令功能

sass命令主要功能是将scss或者sass文件转译成css文件。

sass命令中[options]参数

sass命令中的[options]参数就要包括:

-s, --stdin Read input from standard input instead of an input file --trace Show a full traceback on error --unix-newlines Use Unix-style newlines in written files. --scss Use the CSS-superset SCSS syntax. --watch Watch files or directories for changes. The location of the generated CSS can be set using a colon: sass --watch input.sass:output.css sass --watch input-dir:output-dir --update Compile files or directories to CSS. Locations are set like --watch. --stop-on-error If a file fails to compile, exit immediately. Only meaningful for --watch and --update. --poll Check for file changes manually, rather than relying on the OS. Only meaningful for --watch. -f, --force Recompile all Sass files, even if the CSS file is newer. Only meaningful for --update. -c, --check Just check syntax, don't evaluate. -t, --style NAME Output style. Can be nested (default), compact, compressed, or expanded. --precision NUMBER_OF_DIGITS How many digits of precision to use when outputting decimal numbers. Defaults to 3. -q, --quiet Silence warnings and status messages during compilation. --compass Make Compass imports available and load project configuration. -g, --debug-info Emit extra information in the generated CSS that can be used by the FireSass Firebug plugin. -l, --line-numbers Emit comments in the generated CSS indicating the corresponding source line. --line-comments -i, --interactive Run an interactive SassScript shell. -I, --load-path PATH Add a sass import path. -r, --require LIB Require a Ruby library before running Sass. --cache-location PATH The path to put cached Sass files. Defaults to .sass-cache. -C, --no-cache Don't cache to sassc files. -E encoding Specify the default encoding for Sass files. -?, -h, --help Show this message -v, --version Print version 

SASS转译工具

除了使用sass命令来转译SASS文件之外,还可以借助第三方工具完成,目前世面上较为流行的转译工具主要有:

本文主要介绍了SASS在实际使用中如何配置SASS环境以及SASS文件的转译方式。完成了使用SASS编译项目的第一步。具备这些基础知识之后,我们就可以深入学习SASS的基本知识。并且深入的学习SASS和使用SASS来制作自己喜欢的项目。希望这篇文章对大家学习和运用SASS有所帮助。如果您有更好见解和学习方法,欢迎在下面的评论中积极讨论。(^_^)

作者:携程UED
携程旅行前端开发团队
原文地址:SASS编译, 感谢原作者分享。

发表评论