SCSS學習筆記（一）

weixin_33807284發表於2018-09-05
CSS筆記

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;
}

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

相關文章