SCSS學習筆記（一）

SCSS的由來

SCSS就是增強版的CSS，要講SCSS那就必定要從SASS講起

SASS

Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。2007年發行，2016年版本穩定，設計和開發分開進行，讓這個語言的功能至關完善。

Sass是像CSS同樣的層疊樣式表語言，可是它並非由前端社區發明的，而是由Ruby社區發明創造，爲何Ruby社區要爲前端創造語言，這是由於Ruby社區中有一個全棧Web框架Rails，這個框架包含前端和後端的開發，因此當Ruby社區的人發現CSS並很差用，就發明了一套語言叫作Sass，下面是Sass語法的特色

#sidebar
  width: 30%
  background-color: #faa

Sass語法如上圖所示，它寫法極簡，省略掉了大括號和分號，可是和python同樣，縮進須要嚴格按照規定，這樣子的語法讓不少前端工程師很不適應，因此出現了了SCSS，SCSS將括號分號又給添加回來了，例如

#sidebar {
  width: 30%;
  background-color: #faa;
}

你確定想說，這樣又和CSS有什麼區別，實際上SCSS保留了SASS的其餘部分功能

SCSS的用法

SCSS相較於CSS加入了編程元素，做爲CSS的預處理器，它的基本思想是，用一種專門的編程語言，進行網頁樣式設計，而後再編譯成正常的CSS文件。

變量

SCSS容許使用變量，全部變量以$開頭。

$blue : #1875e7;　
div {
　color : $blue;
}

有了變量，當須要集體修改色型的時候就會方便不少

嵌套

SCSS中容許嵌套，例如CSS中

div h1 {
　　color : red;
}

這樣的語法能夠改寫成

div {
  h1 {
    color: red;
  }
}

mixin

mixin能夠聲明重用一個代碼塊，例如
使用@mixin定義一個代碼塊

@mixin left {
　　float: left;
　　margin-left: 10px;
}

使用@include引入這個代碼塊

div {
　　@include left;
}

編譯成CSS是這樣的

div {
　　float: left;
　　margin-left: 10px;
}

另外，mixin支持參數，能夠像寫函數同樣寫CSS，例如

@mixin left($value: 10px) {//默認是10px
　　float: left;
　　margin-right: $value;
}

引入時，能夠本身添加參數

div {
　　@include left(20px);
}

placeholder

一直引入代碼塊，編譯成CSS的時候仍是會有不少的重複代碼，
使用placeholder能夠節省代碼，用法是用%定義一個公用樣式

%box {
  float: left;
  margin-left: 10px;
}

而後用@extend來調用

.selector { 
  @extend %box; 
}
.nav>ol>li {
  @extend %box;
}

編譯成CSS時就是

.selector,
.nav>ol>li {
  float: left;
  margin-left: 10px;
}

不拷貝樣式，把選擇器提到了樣式前面