iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0
自我挑戰組

網頁學習日誌系列 第 21

SASS : 整合重複數值-變數

在網頁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


上一篇
SASS : 安裝環境和基本操作
下一篇
SASS : @mixin 建立專屬語法資料庫
系列文
網頁學習日誌30

尚未有邦友留言

立即登入留言