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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。