sass的簡介，安裝，語法。

一，sass的簡介

1，Sass徹底兼容全部版本的CSS。咱們對此嚴格把控，因此你能夠無縫地使用任何可用的CSS庫。

2，Sass已經通過其核心團隊超過8年的精心打造。

3，有無數的框架使用Sass構建。好比Compass，Bourbon，和Susy。

 

二，sass的語法

1，使用變量

1. sass讓人們受益的一個重要特性就是它爲css引入了變量。你能夠把反覆使用的css屬性值 定義成變量，而後經過變量名來引用它們，而無需重複書寫這一屬性值。或者，對於僅使用過一 次的屬性值，你能夠賦予其一個易懂的變量名，讓人一眼就知道這個屬性值的用途。
2. sass使用$符號來標識變量(老版本的sass使用!來標識變量。改爲$是多半由於!highlight-color看起來太醜了。)，好比$highlight-color和$sidebar-width。爲何選擇$ 符號呢？由於它好認、更具美感，且在CSS中並沒有他用，不會致使與現存或將來的css語法衝突。

 2，變量聲明

sass變量的聲明和css屬性的聲明很像：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後

nav {
  width: 100px;
  color: #F90;
}

3，變量引用

4，嵌套CSS 規則$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//編譯後

.selected {
  border: 1px solid #F90;
}

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em } } aside { background-color: #EEE } }

/* 編譯後 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

5，父選擇器的標識符&

article a {
  color: blue;
  &:hover { color: red }
}

/* 編譯後 */

article a { color: blue }
article a:hover { color: red }

sass官方地址：https://www.sass.hk/