sass監聽編譯的方式
⑴ sublime怎麼設置sass編譯
使用了Sublime Text也有一段時日了，然後在現在而言，小覺的coding工具已經非其莫屬了，接著小覺因為近期忙著項目的原因，同時還要抽空編輯博客的原因，就暫時把它放在一旁了，現在偶然想起也就說下關於讓Sublime Text支持SASS開發的方法。
提示：沒有安裝Sass及SassBuild之前Sublime Text是不支持Sass開發的，即在下圖之中是沒有Sass選項的。
讓Sublime Text支持SASS的開發 - Sass&SassBuild Packages
點擊查看大圖
以下內容操作前提：已安裝好package control插件，前文已經提及，可通過搜索了解。
讓Sublime Text支持SASS開發說白了其實只要在其上安裝Sass及SassBuild這兩個插件即可，下面為安裝步驟：
1、通過ctrl+shift+p快捷鍵組合打開命令面板
2、在命令欄中輸入"Sass"然後回車，然後在彈出的列表中選擇Sass插件，通過滑鼠單擊或者回車進行安裝，可通過左下角狀態欄查看安裝結果
3、在命令欄中輸入"SassBuild"然後回車，然後在彈出的列表中選擇SassBuild插件，通過滑鼠單擊或者回車進行安裝，可通過左下角狀態欄查看安裝結果
讓Sublime Text支持SASS的開發 - Sass&SassBuild Packages
因為之前安裝了Sass插件，而且安裝過的插件無法再次出現在安裝列表之中，所以第二個步驟就不提供截圖了，同時關於第一步操作的截圖之前也給了很多了，相對簡單也不提供了，最近小覺有點忙，不過只要不出意外，小覺會想小說作者們一樣做到每天更新，而且是4更哦~
⑵ 如何安裝並編譯sass為css文件
1、koala軟體編譯
2、sass命令：依靠環境。
自動編譯命令：（編譯單個文件/編譯整個文件夾）
編譯單個文件
sass文件目錄 sass --watch scss文件的路徑:css文件的路徑 --style expanded
編譯整個文件夾
sass文件目錄 sass --watch scss文件夾/. : css文件夾/. --style expanded
3、gulp編譯
4、hbulid編譯
①工具--預編譯設置
②新建一個預編譯配置 .scss
③輸入觸發命令的地址：ruby裡面的sass.bat地址
④命令參數：%FileName% ../css/%FileBaseName%.css
⑶ sass 用koala怎麼編譯
我最近也在學sass，之前用的是sublime test2，這個編譯器有個好處就是轉譯成css的時候方便，但是終究還是和項目分離，也很麻煩。後來發現只要通過命令行一直監視整個目錄或者文件就方便多了，只要保存，sass就會自動編譯，下面是例子：
監視文件：
sass --watch test.scss:test.css
監視目錄
sass --watch sass(sass目錄):css（css目錄）
滿意的話希望採納啦。。。。
⑷ 用compass編譯sass,進入目錄後執行compass watch 後然後書寫scss文件卻沒有進行編譯，這是怎麼回事呢
您好，這樣的：
Sass的安裝:
1.安裝：SASS是Ruby語言寫的，但是兩者的語法沒有關系。不懂Ruby，照樣使用。只是必須先安裝Ruby，然後再安裝SASS。
假定你已經安裝好了Ruby，接著在命令行輸入下面的命令：
gem install sass
然後，就可以使用了。
2：使用：
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
SASS的官方網站，提供了一個在線轉換器。你可以在那裡，試運行下面的各種例子。
Compass的安裝:
1.安裝：安裝ruby之後，輸入命令
gem install compass
2.使用：創建一個 COMPASS 項目
在命令行中切換到你需要創建項目的目錄，運行：
compass create "projectname"
這個命令會創建一個包含一系列文件的目錄，其中最重要的是配置文件 config.rb，其他文件如果你不需要都可以刪除。
在 config.rb 中你可以修改 SASS 和 CSS 的目錄及其它一些基礎設置。
實時編譯 SASS 文件
COMPASS 提供的默認方法是：
在命令行下切換到項目目錄，運行
compass watch
COMPASS 將會實時監控 SASS 目錄的文件變化，只要你一保存文件，立即將相應文件編譯為 CSS 文件。
⑸ windows10支持sass命令嗎
一、SASS調試插件的方法
如需調試功能，請在編譯輸出的時候輸出debug信息，那樣解析的css文件中就會包含debug信息，然後通過firebug或谷歌的調試工具就可以定位到我們編輯的scss文件，而不是解析後的css文件。
如果光做好SASS的准備工作還不夠，還需要讓瀏覽器支持SASS。那麼就需要一個瀏覽器的插件才能讓瀏覽器識別SASS，從而方便開發人員進行開發。
如需調試功能，請在編譯輸出的時候輸出debug信息，那樣解析的css文件中就會包含debug信息，然後通過firebug或谷歌的調試工具就可以定位到我們編輯的scss文件，而不是解析後的css文件。(如圖1-1)
圖1-1
如果你的css文件中沒有以@media -sass-debug-info開頭的代碼，說明沒有輸出debug信息。請重新使用koala工具編譯你的scss文件，並確定已經勾選了debug信息這個選項。
在火狐中調試，只需要再下載FireSass→即可。
二、編譯工具koala的安裝
1、進入頁面
2、根據系統下載所需要的koala的版本
3、然後在下載文件夾中安裝下載的EXE文件，即可安裝成功
三、編譯工具koala的優點
1、多語言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
2、實時編譯：監聽文件，當文件改變時自動執行編譯，這一切都在後台運行，無需人工操作。
3、編譯選項：既可統一設置文件的編譯選項，也可單獨設置某個文件的編譯選項。
4、強大的文件右鍵功能：右鍵文件元素，即可操作打開文件，打開文件目錄，打開輸出文件目錄，設置輸出文件目錄，編譯，刪除六大常用功能。
5、錯誤提示：在編譯時如果遇到語法的錯誤，koala將在右下角彈出錯誤信息，方便開發者定位代碼錯誤位置。
6、跨平台：windows、linux、mac都能完美運行。
7、免費且負責：koala完全免費，而且作者很負責，有什麼問題作者都會及時給予答復，意見什麼的可以直接提交給作者，一般在下一個版本就能得到解決。
⑹ Sass ,Scss 簡單教程
Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它允許你使用 變數 、 嵌套規則 、 mixins 、 導入 等眾多功能， 並且完全兼容 CSS 語法。 Sass 有助於保持大型樣式表結構良好， 同時也讓你能夠快速開始小型項目， 特別是在搭配 Compass 樣式庫 一同使用時。
第一步安裝 Sass gem：
如果你使用的是 Windows， 就需要先 安裝 Ruby 。
如果要在命令行中運行 Sass ,只要輸入
你還可以命令 Sass 監視文件的改動並更新 CSS ：
如果你的目錄里有很多 Sass 文件，你還可以命令 Sass 監視整個目錄：
使用 sass --help 可以列出完整的幫助文檔。
SASS提供四個 編譯風格 的選項：
生產環境當中，一般使用最後一個選項。
SASS的官方網站，提供了一個 在線轉換器 。可以進行練習。
SASS允許使用變數
SassScript 還支持所有其他 CSS 屬性值類型， 例如 Unicode 范圍和 !important 聲明。 然而，它不會對這些類型做特殊處理。 它們只會被當做不帶引號的字元串看待。
編譯後
如果變數需要鑲嵌在字元串之中，就必須需要寫在#{}之中。
支持數字的標准運算（加 +、減 -、乘 *、除 /和取模 %）,數字也支持關系運算（<、>、<=、>=）， 等式運算（==、!=）被所有數據類型支持。
編譯後
所有算數運算都支持顏色值， 並且是分段運算的。 也就是說，紅、綠、藍各顏色分量會單獨進行運算。 例如：
編譯後
編譯後
編譯後
Mixins允許您定義可以在整個樣式表中重新使用的樣式
編譯後
編譯後
編譯後
完整的案例： https://github.com/xiedajian/jsGrocery/blob/master/Sass%2CScss-demo/index.scss
編譯後： https://github.com/xiedajian/jsGrocery/blob/master/Sass%2CScss-demo/index.css
參考：
阮一峰老師的SASS用法指南
SASS官方參考手冊
⑺ 為什麼我的sass 不會自動編譯成css
sass 不會自動編譯成css
要麼是沒compass compile，要麼是沒watch 不過這兩者都要保證路徑正確
⑻ 微信小程序中使用sass
使用腳本監聽某個目錄文件變化，把sass文件內容編譯成wxss後綴的文件。
--assets（存放靜態資源目錄）
----scss（存放scss源文件目錄）
----wxss（存放編譯後的wxss文件目錄）
Chokidar
https://github.com/paulmillr/chokidar
node-sass
https://github.com/sass/node-sass
⑼ 如何安裝並編譯sass為css文件
Ruby安裝
由於sass依賴於ruby環境，所以在安裝sass之前必須安裝ruby。可以去官網下載一個。網路環境不好的，可以用我提供的這個文件：點擊下載
安裝完成後可以在開始菜單找到ruby命令行，打開輸入ruby -v查看版本號，出現版本信息則安裝成功
clipboard.png-6.6kB
QQ截圖20160917210342.png-1.6kB
Sass安裝
安裝完ruby後，可以直接在命令行裡面輸入gem install sass安裝Sass，不過由於牆的厲害，建議使用淘寶的ruby源來安裝，步驟如下：
gem sources --remove https://rubygems.org/
https://rubygems.org/ removed from sources
gem sources -a https://ruby.taobao.org/
https://ruby.taobao.org/ added to sources
這一步有可能會出錯，windows下證書無法驗證。
解決方法：下載證書（右鍵另存為即可），放到ruby安裝目錄下，然後再設置環境變數SSL_CERT_FILE為該文件路徑，再重新輸入該命令
QQ截圖20160917211759.png-8.6kB
gem source -l
*** CURRENT SOURCES ***
https://ruby.taobao.org/
gem install sass
Fetching: sass-3.4.13.gem (100%)
Successfully installed sass-3.4.13
Parsing documentation for sass-3.4.13
Installing ri documentation for sass-3.4.13
Done installing documentation for sass after 12 seconds
1 gem installed
//如果你在安裝時出現如下提示，則表明網路不佳或源沒有切換到 ruby.taobao.org
ERROR: Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (
https://api.rubygems.org/latest_specs.4.8.gz)
sass -v
Sass 3.4.13 (Selective Steve)
到此，所有的安裝都結束了。接下來我們就可以直接編譯sass文件了
Sass編譯
打開ruby命令行，切換到scss文件所在目錄，執行sass style.scss style.css,就可以將style.scss文件編譯成style.css文件