SASS學習筆記1 —— 安裝、編譯和調試

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

ruby install

sass安裝web

安裝完ruby以後,在開始菜單中,找到剛纔咱們安裝的ruby,打開Start Command Prompt with Rubychrome

Start Command Prompt with Ruby

而後直接在命令行中輸入   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
  • css文件轉成sass/scss文件(在線轉換工具css2sass
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是什麼格式,有四種取值分別爲:nestedexpandedcompactcompressed
    • --sourcemap表示開啓sourcemap調試。開啓sourcemap調試後,會生成一個後綴名爲.css.map文件。
    • --debug-info表示開啓debug信息,升級到3.3.0以後由於sourcemap更高級,這個debug-info就不太用了。

四種style生成後的css

SASS提供四個編譯風格的選項:

    •   * nested:嵌套縮進的css代碼,它是默認值。
    •   * expanded:沒有縮進的、擴展的css代碼。
    •   * compact:簡潔格式的css代碼。
    •   * compressed:壓縮後的css代碼。  sass --style compressed test.sass test.css

生產環境當中,通常使用最後一個選項。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}
四種Style生成後的css

2.2.2 gui編譯

這裏推薦koala,它是一個優秀的免費編譯器,界面清晰簡潔,操做起來也很是簡單,詳細的你們能夠移歩到:Less/Sass編譯工具,koala使用指南,簡單操做以下圖:

koala compile

2.2.3 Webstorm編輯器編譯

某些高上大的編輯器自己就內置了sass的編譯,如webstorm等,若是不清楚你的編輯器是否擁有自動編譯的功能,可谷歌百度。

建立一個 「style.scss」文件,打開後會顯示一個bar,點擊「Add watcher」

2.3 sass調試

sass調試須要開啓編譯時輸出調試信息和瀏覽器調試功能,二者缺一不可。

  2.3.1 開啓編譯調試信息

  • 目前sass的調試分爲兩種,一種爲開啓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 mapdebug info

koala setting

  2.3.4 開啓瀏覽器調試

    谷歌瀏覽器調試-- F12打開調試面板,點擊調試面板右上角的齒輪圖標打開設置,在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS

open chrome css source map

開啓--sourcemap編譯,f12打開調試面板,就能夠看到原先右邊的css文件變成了咱們如今的scss文件

chrome scss

點擊scss文件,會跳到source裏面的scss源文件,如今能夠在裏面進行修改,修改完成後能夠右鍵選擇savesave as命令,而後替換咱們本地的scss源文件,刷新chrome就能夠看到變化(注意,解析樣式須要必定時間)。之後只要ctrl+s保存修改就能夠在瀏覽器中看到修改效果了。

chrome scss source

火狐瀏覽器調試-  debug-info調試

firefox能夠安裝插件FireSass使用debug-info來調試。

開啓--debug-info編譯,f12打開firebug,就能夠看到原先右邊的css文件變成了咱們如今的scss文件

firefox debug

sourcemap調試

firefox 29 將會開始支持sourcemap,注意是火狐自帶的調試功能,而不是firebug。

開啓--sourcemap編譯,右鍵「查看元素」採用火狐自帶的調試功能,打開調試面板,在樣式上右鍵選擇「顯示原始來源」。

firefox sourcemap

點擊scss文件,這樣就跳到了scss文件。以下圖:

firefox sourcemap

而後就能夠進行咱們的修改了,修改以後點擊保存或者'ctrl+s'彈出咱們要保存到哪裏,同谷歌同樣直接覆蓋到咱們本地的源文件就ok了。

firefox sourcemap

ps:我用29 beta版本的時候這個功能不太穩定,估計到穩定版本應該就行了。同時期待FireSass這個插件升級支持sourcemap。

參考:

相關文章
相關標籤/搜索