摘要：生成相互嵌入這個是最常用的，通過定義一個類或方法，在其它地方通過引用這個方法或類。生成注意事項不能繼承這種連續組合的類，應該寫為常用方法詳見不知道別人，反正我最常用的就是顏色方法了。

本文是以自己的理解起的結構，要看詳細的幫助文檔，參閱這里：https://sass-lang.com/documen...

less 和 sass 是兩種 css 預編譯語言，其目的是為了更快、更結構的編寫 css 文件，是一種強大的 css 編譯語言，都能使用 變量、運算符、判斷、方法等等。

scss 與 sass 的區別（這里先不講 less ）：

先有的 sass 后有的 scss

scss 需要大括號{}和分號;

sass 什么都不用直接裸奔

感覺 sass 不如 scss 嚴謹，裸奔太狂野了，所以我們選用 scss，

寫一個 .btn 類并支持 :hover :active 樣式

css

.btn {
/* btn 初始樣式 */
}
.btn:hover{
/* :hover 樣式 */
}
.btn:active{
/* :active 樣式 */
}

scss

.btn{
// btn 初始樣式
    &:hover{
        // hover 樣式
    }
    &:active{
        // active 樣式
    }
}

在scss, sass, less 中 & 都代指父類
上面這個例子中的 & 代指 .btn
可以看出 scss 的結構要比 css 清晰，并且寫的也要更少。
下面的 scss 在使用中就會生成上面的 css。
而這還只是皮毛，保證你用過 scss 之后就不會再用 css 寫樣式了。

變量是以 $ 開頭的，可以是顏色，長度，數值，等等。

像 js 的變量一樣，scss 的變量也是有作用域的，也就是說內部聲明的變量是無法在外面使用的，如果想讓內部的變量在外部可訪問，需要在變量值后面添加 !global 聲明。

（還可以通過添加 !default 給變量設置默認值，這個在寫一個樣式庫的時候比較實用，避免別人在沒有給變量賦值之前使用）

$變量名: 變量值

// Colors
$red:       #CD594B !global;
$yellow:    #F8CE5E;
$green:     #4B9E65;
$yellow:    #5A8DEE;

// Unites
$btn-padding: 4px;
$btn-lineheight: 26px;

實際使用中：

scss

.btn-success {
    background-color: $green;
    line-height: $btn-lineheight;
    color: #fff;
}

生成 css

.btn-success {
    background-color: #4B9E65;
    line-height: 26px;
    color: #fff;
}

將變量直接嵌入字符串，需要用#{ 變量 } （類似 ES6 中模板字符串中的${ 變量 }）

其實 #{} 中是可以插入任意東西的，這里只用到了插入變量，還可以插入方法等等，高級用法。

scss

$bg-path: "./img"

.card{
    background: url("#{$bg-path}/card-bg.png" center center);
}

css

.card{
    background: url("./img/card-bg.png" center center);
}

通過 @import 可以把多個文件結合到一起
有了這個功能，就可以通過功能拆分 scss 文件，使其更結構化，比如，可以分成：變量類，按鈕類，列表類，字體類，排版類等等。

拆分成多個文件的時候，以 _開頭命名的文件，不會被像 phpStorm 中的 file watcher 自動預編譯成css文件，less 沒有這效果，在這一點上 scss 很不錯。

_variables.scss

$bg-btn: #ffffd;
$color-btn: #444;

btn.scss

@import "_variables";

.btn{
    display: inline-block;
    padding: 3px 6px;
    background-color: $bg-btn; 
    color: $color-btn;
}

生成 css

.btn{
    display: inline-block;
    padding: 3px 6px;
    background-color: #ffffd; 
    color: #444;
}

這個是最常用的，通過 @mixin 定義一個類或方法，在其它地方通過 @include 引用這個方法或類。

如果是方法，還可以定義默認值，也就是說可以某些時候，可以傳部分參數。

直接看例子
scss

// @mixin 如果沒有調用，不會被渲染

@mixin rounded($conor: 5px){ // 定義 mixin 并設置默認值 5px
  -webkit-border-radius: $conor;
  -moz-border-radius: $conor;
  border-radius: $conor;
}

.btn-rounded{
  @include rounded(); // 這里引用上面的 mixin，默認值 5px
}

.btn-big-rounded{
  @include rounded(10px); // 這里引用上面的 mixin，并設置值 10px
}

生成 css

.btn-rounded{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.btn-big-rounded{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

有些時候，需要寫的某個類里，包含另一個類的所有聲明。
如： 警告按鈕，包含所有警告顏色類的內容。

scss

.danger{
  background-color: #FF3B30;
}
.round{
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn{
  display: inline-block;
  padding: 3px 6px;
}

.btn-danger{
  @extend .danger, .round, .btn;
}

生成 css

.danger, .btn-danger {
  background-color: #FF3B30;
}
.round, .btn-danger {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn, .btn-danger {
  display: inline-block;
  padding: 3px 6px;
}

@extend 注意事項：
不能繼承 @extend .danger.text 這種連續組合的類，應該寫為 @extend .danger, .text

詳見：https://sass-lang.com/documen...

不知道別人，反正我最常用的就是顏色方法了。列舉常用的顏色方法

lighten     (顏色, 百分比)   // 調亮
darken      (顏色, 百分比)   // 調暗
saturate    (顏色, 百分比)   // 調高飽和度
desaturate  (顏色, 百分比)   // 降低飽和度

scss

$green: #4B9E65;


.green{
  background-color: $green;
}

.green-lighten{
  background-color: lighten($green,20%);
}

.green-darken{
  background-color: darken($green,20%);
}

.green-saturate{
  background-color: saturate($green,20%);
}

.green-desaturate{
  background-color: desaturate($green,20%);
}

生成 css

.green {
  background-color: #4B9E65;
}
.green-lighten {
  background-color: #88c79c;
}
.green-darken {
  background-color: #2a5939;
}
.green-saturate {
  background-color: #34b55c;
}
.green-desaturate {
  background-color: #62876e;
}

方法以 @function 開頭，以 @return 結尾，也就是說，方法的定義，必須要有返回值

詳見：https://sass-lang.com/documen...

像js一樣，用于輸出提示信息

@debug: 普通輸出

@warn: 警告輸出

@error: 錯誤輸出

通用

變量聲明， $var: value

控制聲明，@if @each

@error，@warn，@debug

CSS

樣式，h1 { ... }

樣式@ @media @font-face

@at-root

頂級

導入 @import

混合 @mixin

方法定義 @function

表達式

數字 12 100px

字符串 Helvetina Neue bold

顏色 #ffffff blue

布爾值 true false

null

屬性值組 border: 1px solid #ccc

Maps ("background": red, "foreground": pink)

運算符

== !=

+ - * / %

< <= >=

and or not

+ - / 連接字符

( )

其它

變量 $var

方法調用 nth($list,1) var(--main-bg-color)

特殊方法 calc(1px + 100%) url(http://myapp.com/assets/logo.png)

父選擇器 &

!important

/*  多行注釋
        可以多行
        在非壓縮模式下，這種注釋會被輸出到 css 中
*/

// 單行注釋
// 這種注釋不會輸出到 css 中

CSS 本身自帶一些方法，大多數方法都能與SCSS方法和平共存，但有些會產生沖突，如url()

如果 url() 傳入的參數是有效的帶引號的url，sass不會處理它，但還可以往其中插入變量，如果不是有效的帶引號的 url，帶有方法或變量的，sass就把它當成正常的方式識別。如：

$bg-path: "./pics"

.card-bg{
    background: url("#{$bg-path}/card-bg.png") center center;
}

// 或
.card-bg{
    background: url($bg-path+"/card-bg.png") center center;
}

都會輸出為

.card-bg{
    background: url("./pics/card-bg.png") center center;
}

有時候，比如，你需要寫一個按鈕類 .btn-success, .btn-danger, .btn-default, .btn-warning，如果單個定義的話，會很麻煩，現在用了方法，就可以直接填參數完成了。

scss

$green:     #4B9E65;
$blue:      #5A8DEE;
$yellow:    #F8CE5E;
$red:       #CD594B;

@mixin btn-template($bgcolor,$fcolor:white){
// 定義了兩個參數，第二個參數有默認值
// 也就是說這個方法可以值一個或兩個參數
// 另外 帶 () 參數的方法不會把自身渲染到 css 中，只有調用才會渲染
  color: $fcolor;
  border-color: darken($bgcolor, 3%);
  background-color: $bgcolor;
  &:hover {
    background-color: darken($bgcolor, 5%);
  }
  &:active {
    background-color: darken($bgcolor, 10%);
  }
}

.btn-success{
  @include btn-template($green)
}
.btn-primary{
  @include btn-template($blue)
}

.btn-warning{
  @include btn-template($yellow)
}

.btn-danger{
  @include btn-template($red)
}

上面的 scss 輸出為下面的內容，有沒有很厲害

.btn-success {
  color: white;
  border-color: #46945e;
  background-color: #4B9E65;
}
.btn-success:hover {
  background-color: #438d5a;
}
.btn-success:active {
  background-color: #3b7b4f;
}
.btn-primary {
  color: white;
  border-color: #4c83ed;
  background-color: #5A8DEE;
}
.btn-primary:hover {
  background-color: #437dec;
}
.btn-primary:active {
  background-color: #2c6de9;
}
.btn-warning {
  color: white;
  border-color: #f7ca4f;
  background-color: #F8CE5E;
}
.btn-warning:hover {
  background-color: #f7c746;
}
.btn-warning:active {
  background-color: #f6bf2d;
}
.btn-danger {
  color: white;
  border-color: #ca4e3f;
  background-color: #CD594B;
}
.btn-danger:hover {
  background-color: #c74737;
}
.btn-danger:active {
  background-color: #b34032;
}

Bootstrap v3 - less 語言: https://github.com/twbs/boots...

Bootstrap v4 - scss 語言: https://github.com/twbs/boots...

就是去看 bootstrap v4 的樣式源碼，bootstrap v4 就是用 scss 寫的

如果想學 less 可以看這篇 [ less基礎用法 ] - SegmentFault -CSDN， bootstrap v3 就是用 less 寫的。

下載 bootstrap 的 scss 源碼，看里面怎么寫的，進步很快的。