在網頁CSS都常見到重複的數值，未來如果更改其中一項，其他也都要全都找出來，非常浪費時間，因此SASS「變數」就是來處理這樣的狀況。

HTML：先設定3個div，裡面放標題和文字。

    <div class="box">
        <h3>標題A</h3>
        <p>文字</p>
    </div>
    
    <div class="box1">
        <h3>標題B</h3>
        <p>文字</p>
    </div>
    
    <div class="box2">
        <h3>標題C</h3>
        <p>文字</p>
    </div>

如下圖所示：

CSS：設定三個.box都是寬高、顏色一樣

.box{
    float: left;
    width: 200px;
    height: auto;
    border:1px solid blue;
  h2{
      font-size: 24px;
  } 
  p{
      color:#222;
  } 
}
//box1、box2都是相同設定

設定變數：

顏色

原先CSS設定如下：

//border顏色
border:1px solid blue;
//文字顏色
color:#222;

設定變數：「$」+「變數」

//border顏色
$border-color:blue;
//文字顏色
$p-color:#222;

套用變數：顏色數值替換成「變數」

.box{
    float: left;
    width: 200px;
    height: auto;
    border:1px solid $border-color;//顏色數值改變數
  h2{
      font-size: 24px;
  } 
  p{
      color:$p-color;//顏色數值改變數
  } 
}

下圖左邊為SCSS，右邊為輸出的CSS，圈選處為輸出顏色與設定的變數顏色是一樣的：

數值大小：

原先CSS設定如下：設定h2為大字24px

  h2{
      font-size: 24px;
  } 

設定變數：「$」+「變數」+「乘除運算」

可直接設數值，如果字體有「大」「中」「小」字要設定(24、16、14px)，
可以先設值給「中等字」變數，大字和小字就參考中等字而做乘除。

$font-m:16px;/*設定大小時候預設值要放第一個才能成功編譯*/
$font-l:$font-m * 1.5;//24px
$font-s: $font-m * 0.9;//14.4px

套用變數：文字數值替換成「變數」，以下有兩種方法：

1.直接套入變數

2.中間值變數(如.font-m)後面做乘除

 //直接套入變數
 h2{
        font-size: $font-l;//得到24px
    } 
//中間值變數後面做乘除 
 h2{
        font-size: $font-m*1.5;//得到24px
    } 

下圖左邊為SCSS，右邊為輸出的CSS，
黃色圈選處即使設定變數方式不同(不設變數、中間數值變數做乘除、套入變數)，
輸出文字大小都是相同(24px)：

codepen網址：https://codepen.io/yuski/pen/RxGjEL