如何編譯sass命令行
① 如何安裝Sass
ruby安裝
因為sass依賴於ruby環境,所以裝sass之前先確認裝了ruby。先導官網下載個ruby
在安裝的時候,請勾選Add Ruby executables to your
PATH這個選項,添加環境變數,不然以後使用編譯軟體的時候會提示找不到ruby環境
sass安裝
如果你喜歡偷懶,或者你公司網路限制比較多,請直接看最後一段
安裝完ruby之後,在開始菜單中,找到剛才我們安裝的ruby,打開Start Command Prompt with Ruby
然後直接在命令行中輸入
gem install sass
按回車鍵確認,等待一段時間就會提示你sass安裝成功。
如果要安裝beta版本的,可以在命令行中輸入
gem install sass --pre
你還可以從sass的Git repository來安裝,git的命令行為
git clone git://github.com/nex3/sass.git cd sass rake install
如果上述的辦法你嘗試失敗了,那說明要麼被你的網路牆了這個,要麼你的網路信號不好。你可以嘗試本地安裝,不過有點復雜。這里暴漏個驚天秘密,那就是koala這個編譯工具已經內置了sass,所以如果你安裝了koala,就根本不需要安裝sass,注意ruby還是得安裝。關於koala請參閱編譯工具。
② sass 用koala怎麼編譯
我最近也在學sass,之前用的是sublime test2,這個編譯器有個好處就是轉譯成css的時候方便,但是終究還是和項目分離,也很麻煩。後來發現只要通過命令行一直監視整個目錄或者文件就方便多了,只要保存,sass就會自動編譯,下面是例子:
監視文件:
sass --watch test.scss:test.css
監視目錄
sass --watch sass(sass目錄):css(css目錄)
滿意的話希望採納啦。。。。
③ 怎麼使用Less/Sass編譯工具koala
一、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裡面怎樣引用sass文件
好像不能直接引用.scss(和.sass一樣,只是寫法規范不同)文件,需要通過工具(軟體或命令行)先進行編譯生成.css文件後,再引入.css文件使用。
⑤ sass怎麼編譯同一文件下的不同scss
編譯sass文件 在命令行下進入到sass文件所在目錄, 運行>compass compile 也可以指定要編譯的文件 >compass compile fileName.scss #sass文件夾下會有個config文件指定編譯後的css存放位置。
⑥ 安裝完sass-loader載入器解析 後怎麼將scss文件編譯成css
比如我使用webpack,那麼我打包的時候,編譯器就會幫我編譯好了。
LESS同理。
⑦ 編譯Sass 文件出現Syntax error: Invalid GBK character報錯怎麼解決
文件頂部添加 @charset "utf-8";
⑧ 用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 文件。