sass入門

1、sass安裝

先甩個連接,按照這個步驟安裝就能夠了http://www.w3cplus.com/sassguide/install.html,或者去官網找下載方法.

 

2、預編譯sass的所有流程

首先要有一個項目,項目名字隨便取,我這裏就把項目名字取爲sass,個人文件目錄以下:

而後進入sass文件下下面(此處須要注意,若是不進入這個文件下則預編譯scss的時候須要寫所有路徑) -> ctrl+shift+鼠標右鍵打開cmd ->選擇在此處打開命令窗口 (以下圖顯示)

-> 輸入命令 sass --watch --style compressed test.scss:test.css --style expanded ->就會發現sass文件下面多了兩個文件test.css和test.css.map(以下圖)

->而後再html裏面用link引用就能夠了

 

 

Tips:

 若是沒有進入sass項目下就在cmd裏面寫sass --watch --style compressed test.scss:test.css --style expanded命令是不會起做用的,須要寫全文件路徑路徑,即:

sass --watch --style compressed F:/manlili/sass/css/test.scss:F:/manlili/sass/css/test.css --style expanded

 

三 、原理

 慕課網的視頻作的挺好,有興趣能夠看看http://www.imooc.com/learn/311

 

第一步:分清Sass 和 SCSS

Sass 和 SCSS 實際上是同一種東西，咱們平時都稱之爲 Sass，二者之間不一樣之處有如下兩點：

(1)文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名,可是編譯出來的是同一個.css文件

(2)語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。

 

那麼問題來了,爲何有了sass還要有scss?

回答: 來看一個例子

看出來了吧,css主要是前端負責書寫,sass的語法讓習慣寫分號和大括號閉合的前端工程師不舒服,並且容易出錯,因此scss應運而生.

 

第二步:用命令將Sass 或者SCSS編譯爲css

編譯語法總結以下:

(1)一次性單文件編譯 

sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

(2)一次性多文件編譯 

sass <要編譯的Sass文件路徑>/:<要輸出CSS文件路徑>/

(3)實時進行編譯 

sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

第三步:設置編譯後的css的格式

四種格式:

1. 嵌套輸出方式 nested
2. 展開輸出方式 expanded  
3. 緊湊輸出方式 compact 
4. 壓縮輸出方式 compressed

分別以下圖:

對同一個scss文件:(代碼以下)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

輸入不一樣的命令參數,以下圖:

 

四 、介紹一款可自動編譯SASS的IDE

首先聲明這裏不是廣告,用Hbulider編輯器能夠實現SASS自動編譯.很方便,這裏只是提供一種方法,你能夠不採納,步驟以下:

點擊工具 -> 選擇預編譯器設置 以下圖:

 

- > 下一步:進入首選項

 

 

->下一步設置

 

-> 接着去本身的*.scss裏面寫代碼,就會自動生成*.css文件了