如何使用scss/sass

SCSS 與 Sass 異同：http://sass.bootcss.com/docs/scss-for-sass-users/；

歡迎加入前端交流羣來py：749539640

轉載請標明出處！

廢話很少說，直接進入正題；

安裝Sass和Compass

sass基於Ruby語言開發而成，所以安裝sass前須要安裝Ruby。（注:mac下自帶Ruby無需在安裝Ruby!）

window下安裝SASS首先須要安裝Ruby，先從官網下載Ruby並安裝。安裝過程當中請注意勾選Add Ruby executables to your PATH添加到系統環境變量。以下圖：

 

安裝完成後需測試安裝有沒有成功,運行CMD輸入如下命令：

ruby -v

//如安裝成功會打印

ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

 

如上已經安裝成功。但由於國內網絡的問題致使gem源間歇性中斷所以咱們須要更換gem源。（使用淘寶的gem源https://ruby.taobao.org/）以下：

//1.刪除原gem源

gem sources --remove https://rubygems.org/

//2.添加國內淘寶源

gem sources -a https://ruby.taobao.org/

//3.打印是否替換成功

gem sources -l

//4.更換成功後打印以下

*** CURRENT SOURCES ***

https://ruby.taobao.org/

 

Ruby自帶一個叫作RubyGems的系統，用來安裝基於Ruby的軟件。咱們可使用這個系統來 輕鬆地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你須要輸入下面的命令：

//安裝以下(如mac安裝遇到權限問題需加 sudo gem install sass)

gem install sass

gem install compass

 

在每個安裝過程當中，你都會看到以下輸出：

Fetching: sass-3.x.x.gem (100%)

Successfully installed sass-3.x.x

Parsing documentation for sass-3.x.x

Installing ri documentation for sass-3.x.x

Done installing documentation for sass after 6 secon

1 gem installed

 

安裝完成以後，你應該經過運行下面的命令來確認應用已經正確地安裝到了電腦中：

sass -v

Sass 3.x.x (Selective Steve)

compass -v

Compass 1.x.x (Polaris)

Copyright (c) 2008-2015 Chris Eppstein

Released under the MIT License.

Compass is charityware.

Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

 

以下sass經常使用更新、查看版本、sass命令幫助等命令：

//更新sass

gem update sass

//查看sass版本

sass -v

//查看sass幫助

sass -h

 

編譯sass

sass編譯有不少種方式，如命令行編譯模式、sublime插件SASS-Build、編譯軟件koala、前端自動化軟件codekit、Grunt打造前端自動化工做流grunt-sass、Gulp打造前端自動化工做流gulp-ruby-sass等。

新建一個input.scss的文件裏面寫入scss語句==>好比我要轉換爲output.css==>執行sass input.scss output.css

 

命令行編譯

//單文件轉換命令

sass input.scss output.css


//單文件監聽命令

sass --watch input.scss:output.css


//若是你有不少的sass文件的目錄，你也能夠告訴sass監聽整個目錄：

sass --watch app/sass:public/stylesheets

 

命令行編譯配置選項;

命令行編譯sass有配置選項，如編譯事後css排版、生成調試map、開啓debug信息等，可經過使用命令sass -v查看詳細。咱們通常經常使用兩種--style``--sourcemap。

//編譯格式

sass --watch input.scss:output.css --style compact


//編譯添加調試map

sass --watch input.scss:output.css --sourcemap


//選擇編譯格式並添加調試map

sass --watch input.scss:output.css --style expanded --sourcemap


//開啓debug信息

sass --watch input.scss:output.css --debug-info

 

• --style表示解析後的css是什麼排版格式;
  sass內置有四種編譯格式:nested``expanded``compact``compressed。
• --sourcemap表示開啓sourcemap調試。開啓sourcemap調試後，會生成一個後綴名爲.css.map文件。

四種編譯排版演示：

//未編譯樣式

.box {

  width: 300px;

  height: 400px;

  &-title {

    height: 30px;

    line-height: 30px;

  }

}

 

1.nested 編譯排版格式

/*命令行內容*/

sass style.scss:style.css --style nested

 
/*編譯事後樣式*/

.box {

  width: 300px;

  height: 400px; }

  .box-title {

    height: 30px;

    line-height: 30px; }

 

2.expanded 編譯排版格式

/*命令行內容*/

sass style.scss:style.css --style expanded


/*編譯事後樣式*/

.box {

  width: 300px;

  height: 400px;

}

.box-title {

  height: 30px;

  line-height: 30px;

}

 

3.compact 編譯排版格式

/*命令行內容*/

sass style.scss:style.css --style compact


/*編譯事後樣式*/

.box { width: 300px; height: 400px; }

.box-title { height: 30px; line-height: 30px; }

 

4.compressed 編譯排版格式

/*命令行內容*/

sass style.scss:style.css --style compressed


/*編譯事後樣式*/

.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}