【舒：】sass文件編譯的三種方式

方式一：

1.webstorm打開evtGulp項目或者mcake-activity項目
2.中，開啟gulp->default/develop，啟動watch監聽
3.新建一個擴展名為.scss的sass文件文件
4.保存后，自動編譯到指定的css中



方式二:

1.webstorm打開一個空白項目
2.新建一個擴展名為.scss的sass文件文件
3.webstorm上方會提示，是否自動編譯，選擇yes
4.寫好sass之后，保存便會自動保存為同名稱同目錄下的css文件



方式三：
1.sublime等非智能編輯器編輯sass文件
2.必須在帶有gulp的項目中，evtGulp或者mcake-activity
3.此時必須在當前路徑的位置輸入cmd打開命令行工具（自動定位到當前目錄）
4.運行gulp default或者gulp develop，開啟實時監聽
5.在sublime中編輯sass文件，會自動保存到同目錄下的css文件內



===========================================================================================
sass所依賴的環境ruby,compass



創建運行Sass的環境,首先要先安裝ruby
安裝完ruby之后，在開始菜單中，找到剛才我們安裝的ruby，打開Start Command Prompt with Ruby
安裝sass
<1>Sass的安裝:

Ruby命令行下輸入下面的命令：
gem install sass

<2>Compass的安裝:
Ruby命令行下輸入下面的命令：

gem install compass

<3>創建一個 COMPASS 項目
在命令行中切換到你需要創建項目的目錄，運行：
compass create? projectname

這個命令會創建一個包含一系列文件的目錄，其中最重要的是配置文件 config.rb，其他文件如果你不需要都可以刪除。

在 config.rb 中你可以修改 SASS 和 CSS 的目錄及其它一些基礎設置。
<4>實時編譯 SASS 文件
COMPASS 提供的默認方法是：
在命令行下切換到項目目錄，運行
compass watch

將會實時監控 SASS 目錄的文件變化，只要你一保存文件，立即將相應文件編譯為 CSS 文件。

<5>SASS文件就是普通的文本文件，里面可以直接使用CSS語法。文件后綴名是.scss，意思為Sassy CSS。SASS提供兩種編譯方式，一種是手動編譯，一種是監視編譯(–watch)，手動編譯就是當你撰寫好CSS時下指令去做編譯，監視編譯則是你指令一個目錄，當此目錄里面的*.scss檔案有改變時（新增、覆寫等等），就會自動去做編譯的動作。先來講手動編譯方式：
下面的命令，可以在屏幕上顯示.scss文件轉化的css代碼。（假設文件名為test。）
sass test.scss
如果要將顯示結果保存成文件，后面再跟一個.css文件名。
sass test.scss test.css
SASS提供四個編譯風格的選項：
* nested：嵌套縮進的css代碼，它是默認值。
* expanded：沒有縮進的、擴展的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮后的css代碼。
生產環境當中，一般使用最后一個選項。
sass –style compressed test.sass test.css
還有一種監視的方式做編譯，在命令行中切換到當前sass或者scss文件所在的目錄，然后運行
sass –watch scss:css

http://www.mamicode.com/info-detail-1523768.html

轉載于:https://www.cnblogs.com/shimily/articles/6594761.html

總結

以上是生活随笔為你收集整理的sass文件编译的三种方式【舒】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。