SASS编译

时间 2019-11-29

标签 sass 编译繁體版

原文原文链接

引述

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

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

到目前为止，将SASS转译成CSS并非件困难的事情。能够经过命令行工具或者第三方插件来完成SASS向CSS的转译工做，而且转译出来的CSS代码，格式优美，且符合CSS的标准。html

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

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

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

SASS的编译环境

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

因为SASS是在Ruby环境下运行，因此你们首先须要在本身的工做电脑上安装Ruby。具体如何安装，此处不作过多的介绍，若是您须要安装的话，能够参阅下面的教程：sql

在Mac系统下，Ruby通常已内置在其中，若是您不能确认是否已安装，或者说你不知道你的Ruby使用的版本，你能够打开你的命令工具：shell

$ 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文件以外，还能够借助第三方工具完成，目前世面上较为流行的转译工具主要有：

 Compass.app
 Scout
 Codekit
 Koala

本文主要介绍了SASS在实际使用中如何配置SASS环境以及SASS文件的转译方式。完成了使用SASS编译项目的第一步。具有这些基础知识以后，咱们就能够深刻学习SASS的基本知识。而且深刻的学习SASS和使用SASS来制做本身喜欢的项目。但愿这篇文章对你们学习和运用SASS有所帮助。若是您有更好看法和学习方法，欢迎在下面的评论中积极讨论。(^_^)

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