如何使用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}