SASS编译_Sass, Preprocessor, SCSS, 会员专栏教程

作者：大漠日期：2013-07-18 点击：25954

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

引述

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

有的时候在Linux和OS 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库有Compass和Bourbon。接下来，简单看看这两个库怎么来安装。

安装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项目中创建sass和css两个文件夹：

$ 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="/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项目中在创建sass和css目录，用来放置您自己的.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即可。

虽然sass和sass --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有所帮助。如果您有更好见解和学习方法，欢迎在下面的评论中积极讨论。(^_^)

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

nike air max 1 online

上一篇: Alexwolfe的Button库使用 | 下一篇: SASS调试

w3cplus

SASS编译

引述

SASS的编译环境

SASS的安装

标准稳定版安装

Beat版本安装

从Git库中安装

安装SASS库

安装Compass库

安装Bourbon库

创建你的第一个SASS项目

干净的SASS项目

Compass创建SASS项目

Bourbon创建SASS项目

SASS文件转译

普通SASS的转译方法

转译Compass创建的SASS项目

CSS转译成SASS

sass命令使用

sass语法

sass命令功能

sass命令中[options]参数

SASS转译工具

直达目的地(^_^)

关于我们

关于站长

我的作品

w3cplus

你在这里

SASS编译

引述

SASS的编译环境

SASS的安装

标准稳定版安装

Beat版本安装

从Git库中安装

安装SASS库

安装Compass库

安装Bourbon库

创建你的第一个SASS项目

干净的SASS项目

Compass创建SASS项目

Bourbon创建SASS项目

SASS文件转译

普通SASS的转译方法

转译Compass创建的SASS项目

CSS转译成SASS

sass命令使用

sass语法

sass命令功能

sass命令中[options]参数

SASS转译工具

直达目的地(^_^)

关于我们

关于站长

我的作品