iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

如何成為一名斜槓煉金術士,學習前端相關技能系列 第 14

Day14 Sass 變數有趣的地方

大家好,我是烏木白,我今天要講的是,變數有趣的地方及進階的用法。

變數可以加減乘除!!

在一個設計稿裡面,大部分的設計師在設定文字大小、間距的寬度,都會盡量使用倍數的方式來做設計,這時候我們就可以先去設定基準點,再利用那個基準點去做加減乘除的運算,來達到我們的使用目的!

$font-s : 16px;
$font-l : $font-s * 1.5;

.header {
    font-size : $font-l;  //16*1.5 = 24 
}

例如以上這樣的寫法

字串管理

大部分字串管理,都是在設定字型的時候會用到,那有時候做好專案了,客人可能看了對於字型不太滿意又要改,這時候直接用字串管理會方便許多喔

以下範例:

$font-family-base : 'Roboto', sans-serif;

body {
    font-family : $font-family-base;
}

darken、lighten

這兩個是在調整變數裡面的顏色,darken 這個是讓顏色暗一點, lighten,這個是讓顏色亮一點。

目前在許多樣板的套件也都是使用 Scss 來做設定,例如:Bootstrap 大家可以去他的 Github 參考看看喔!


上一篇
Day13 Sass篇-什麼是變數?
下一篇
Day15 Sass import
系列文
如何成為一名斜槓煉金術士,學習前端相關技能30

尚未有邦友留言

立即登入留言