命令行編譯sass


一、安裝ruby
1、需要的軟件設備:

2、安裝過程:
點擊上圖“應用程序”安裝即可,注意安裝過程中其中三項都需要打上勾。
如若沒有三項都打上勾則需要修改環境變量中的path路徑后添加一個分號。

3、打開cmd 或 win+r 輸入:gem -v 檢查rubyinstaller是否安裝成功 輸出為:2.4.5 則為安裝成功。 如若沒有顯示,重啟一下電腦就好了!!

4、安裝sass-3.4.22.gem:
輸入:gem install +sass-3.4.22.gem所在的路徑 回車即可


5、安裝完成!(或者按上一章中的辦法安裝即可!

====================================================================================

demo:

新建項目:web文件夾--包括scss文件和css文件!

scss文件用來放.scss文件的、css是執行sass編譯監聽后存放.css文件的(用來給.HTML文件引用的css文件)

在命令行執行命令:【監聽整個文件夾】

sass --watch  scss:css

 --watch為實時監聽 scss:css---->把scss文件里是我.scss文件編譯到css文件里成為.css文件

----------------------------------------------------------------------------------------------------------------------------------------

 Sass編譯出來的樣式風格有4種:

  • 嵌套輸出方式 nested 它是默認值
  • 展開輸出方式 expanded
  • 緊湊輸出方式 compact
  • 壓縮輸出方式 compressed 生產環境當中一般使用這個

單獨編譯不執行監聽單個文件! 若想要實時監聽則添加 --watch 即可!

1)默認格式 ,不壓縮: sass index.scss index.css --style nested

2)常規,頁面代碼比較清晰:sass index.scss index.css --style expanded

3)一行展示,不進行壓縮: sass index.scss index.css --style compact

4)壓縮: sass index.scss index.css --style compressed

(壓縮一般是用在上線的時候使用}

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM