基礎sass

一、安裝
參考:http://www.jianshu.com/p/5bfc9411f58f
參考:https://www.w3cschool.cn/sass/sass_installation.html
sass依賴於ruby,首先安裝ruby,對於window電腦安裝如下(mac自帶有ruby):
1)官網下載相應的ruby安裝包
2)安裝過程中,除了記得勾選“add Ruby executables to your PATH”之外,其它都是一鍵點到底
3)安裝完成之後可再次使用ruby -v檢測是否安裝成功

ruby安裝包中集成了gem包管理工具,類似於nodejs下的npm,因此我們不需再下載gem,直接打開命令行來使用gem

gem改源:放在rubygem.org上的資源文件位於國外站點,由於某些原因,在國內訪問可能會出現連接失敗等問題,所以我們先把gem的連接源改到國內的一些鏡像資源上

1)取消默認的綁定源
gem sources –remove https://rubygems.org/
2)綁定國內網站
gem sources -a http://gems.ruby-china.org/
3)gem sources -l查看current resources,以驗證換源是否成功

sass的安裝
1)gem install sass
2)sass -v 查看版本

gem的一些常用的命令
1)如果果斷時間需要更新ruby程序的話,可以使用
gem update
2)安裝特定版本的sass
gem install sass –version=版本號(例如3.3.0)
3)列出本地安裝的所有ruby程序包
gem list
4)刪除特定版本的sass
gem uninstall sass –version=版本號
5)刪除本地安裝的sass
gem uninstall sass

二、編譯
sass有兩種文件類型:第一種以xxx.sass結尾的文件,不使用花括號和分號;第二種以xxx.scss結尾的文件,和xxx.css文件一樣使用花括號和分號。
編譯test.scss生成test.css:sass test.scss test.css

–watch模式:sass監聽某個文件或目錄,一旦源文件有變動,就自動生成編譯後的版本
sass –watch test.scss:test.css

–style取值有以下四種:
sass –style compact –watch test.scss:test.css
* nested:嵌套縮進的css代碼,它是默認值。
* expanded:沒有縮進的、擴展的css代碼。
* compact:簡潔格式的css代碼。
* compressed:壓縮後的css代碼。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章