iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Modern Web

SASS 基礎初學三十天系列 第 6

DAY 06 Variable

終於進入到介紹 SASS 特點的區塊啦~

第一個要介紹的就是大名鼎鼎的 變數 Variable 的部分,應該也能算是 SASS 最常用的方法。

變數 Variable

在變數的寫法下,我們可以將字型設定、顏色、或是任何css的資料儲存成參數,當客戶突然想要修改某個設計上的顏色~~(尤其常常發生這樣的事⸍⚙̥ꇴ⚙̥⸌)~~,我們可以快速地透過參數去修改配置。

如下面的 CSS 演示,在修改整體字型的時候,SASS 的部分可以透過修改變數來更改任何有套用到 font-stack 的 html tag style ,如果是用 CSS 的做法,要修改全部的 font 的字型,就要一個一個的找到 font 設定去修改~~(雖然 ctrl+F 也是挺方便啦)~~。

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
body {
font: 100% Helvetica, sans-serif;
color: #333;
}

實作

那我們就來亂加變數玩玩看啦!

先從字型的變數來設定,先從 Google Font 挑選自己喜歡的字型,選擇之後右側會引導你如何引入在 js 或是 html 中,之後就是設定 SASS的部分。

Untitled

首先 import Google Fonts url 進入專案中,之後在設定字型變數,並且在 h1 h2 的 style property 中加入字型變數,這樣 h1 h2 就會有不一樣的字型顯示!

// Google Fonts
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);

// Font Variables Setup
$roboto-slab: 'Roboto Slab', serif
$open-sans: 'Open Sans', sans-serif

$primaryColor: #e0a70a
$backgroundColor: #111111

h1
  color: $primaryColor
  font-family: $roboto-slab

h2
  font-family: $open-sans

之後打開 localhost ,使用chrome 的檢查來看看字型有沒有成功套用到

Untitled

看來字型都有成功設置呢!真是可喜可賀


除此之外,也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了!是世界奇觀!

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端?後端?你早晚都要全端的,何不從現在開始?


上一篇
DAY 05 實作環境配置 - 2
下一篇
DAY 07 Mixins
系列文
SASS 基礎初學三十天30

尚未有邦友留言

立即登入留言