1、什麼是SASSjavascript
SASS是一種"CSS預處理器"(css preprocessor)的開發工具,爲CSS加入編程元素,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護。css
2、安裝和使用html
2.1 安裝java
SASS是Ruby語言寫的,可是二者的語法沒有關係。不懂Ruby,照樣使用。只是必須先安裝Ruby,而後再安裝SASS。先導官網下載個rubygit
在安裝的時候,請勾選Add Ruby executables to your PATH這個選項,添加環境變量,否則之後使用編譯軟件的時候會提示找不到ruby環境github
sass安裝web
安裝完ruby以後,在開始菜單中,找到剛纔咱們安裝的ruby,打開Start Command Prompt with Rubychrome
而後直接在命令行中輸入 gem install sass編程
若是要安裝beta版本的,能夠在命令行中輸入瀏覽器
gem install sass --pre
你還能夠從sass的Git repository來安裝,git的命令行爲
git clone git://github.com/nex3/sass.git cd sass rake install
升級sass版本的命令行爲 gem update sass
查看sass版本的命令行爲 sass -v
你也能夠運行幫助命令行來查看你須要的命令 sass -h
2.2 sass編譯
2.2.1 命令行編譯
sass style.scss style.css
sass --watch style.scss:style.css
sass --watch sassFileDirectory:cssFileDirectory
sass-convert style.css style.sass sass-convert style.css style.scss
命令行其餘配置選項
sass -h
--style
,--sourcemap
,--debug-info
等。sass --watch style.scss:style.css --style compact sass --watch style.scss:style.css --sourcemap sass --watch style.scss:style.css --style expanded --sourcemap sass --watch style.scss:style.css --debug-info
--style
表示解析後的css是什麼格式,有四種取值分別爲:nested
,expanded
,compact
,compressed
。--sourcemap
表示開啓sourcemap調試。開啓sourcemap調試後,會生成一個後綴名爲.css.map
文件。--debug-info
表示開啓debug信息,升級到3.3.0以後由於sourcemap更高級,這個debug-info就不太用了。四種style生成後的css
SASS提供四個編譯風格的選項:
生產環境當中,通常使用最後一個選項。SASS的官方網站,提供了一個在線轉換器。你能夠在那裏,試運行下面的各類例子。
四種style生成後的css // nested #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // expanded #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compact #main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compressed #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
2.2.2 gui編譯
這裏推薦koala,它是一個優秀的免費編譯器,界面清晰簡潔,操做起來也很是簡單,詳細的你們能夠移歩到:Less/Sass編譯工具,koala使用指南,簡單操做以下圖:
2.2.3 Webstorm編輯器編譯
某些高上大的編輯器自己就內置了sass的編譯,如webstorm等,若是不清楚你的編輯器是否擁有自動編譯的功能,可谷歌百度。
建立一個 「style.scss」文件,打開後會顯示一個bar,點擊「Add watcher」
2.3 sass調試
sass調試須要開啓編譯時輸出調試信息和瀏覽器調試功能,二者缺一不可。
2.3.1 開啓編譯調試信息
debug-info
,一種爲開啓sourcemap
(這個將成爲主流)。debug-info
,則解析的css文件中會有以@media -sass-debug-info
開頭的代碼,如沒有則代表沒有開啓。sourcemap
,則在解析的css文件同目錄下生成一個.css.map
的後綴名文件。2.3.2 命令行開啓
兩個的命令分別爲--debug-info
,--sourcemap
,開啓以下:
sass --watch style.scss:style.css --debug-info
sass --watch style.scss:style.css --sourcemap
2.3.3 koala開啓
以下圖:點擊相應的文件,而後就會出現右邊的編譯選項,便可選擇是否開啓source map
,debug info
2.3.4 開啓瀏覽器調試
谷歌瀏覽器調試-- F12打開調試面板,點擊調試面板右上角的齒輪圖標打開設置,在general
選項中勾選Enable CSS source map
和 Auto-reload generated CSS
。
開啓--sourcemap
編譯,f12
打開調試面板,就能夠看到原先右邊的css文件變成了咱們如今的scss文件
點擊scss文件,會跳到source
裏面的scss源文件,如今能夠在裏面進行修改,修改完成後能夠右鍵選擇save
或save as
命令,而後替換咱們本地的scss源文件,刷新chrome就能夠看到變化(注意,解析樣式須要必定時間)。之後只要ctrl+s
保存修改就能夠在瀏覽器中看到修改效果了。
火狐瀏覽器調試- debug-info調試
firefox能夠安裝插件FireSass使用debug-info
來調試。
開啓--debug-info
編譯,f12
打開firebug,就能夠看到原先右邊的css文件變成了咱們如今的scss文件
sourcemap調試
firefox 29 將會開始支持sourcemap
,注意是火狐自帶的調試功能,而不是firebug。
開啓--sourcemap
編譯,右鍵「查看元素」採用火狐自帶的調試功能,打開調試面板,在樣式上右鍵選擇「顯示原始來源」。
點擊scss文件,這樣就跳到了scss文件。以下圖:
而後就能夠進行咱們的修改了,修改以後點擊保存或者'ctrl+s'彈出咱們要保存到哪裏,同谷歌同樣直接覆蓋到咱們本地的源文件就ok了。
ps:我用29 beta版本的時候這個功能不太穩定,估計到穩定版本應該就行了。同時期待FireSass
這個插件升級支持sourcemap。
參考: