iT邦幫忙

DAY 3
10

30天掌握Sass語法系列 第 3

30天掌握Sass語法 - (3)如何透過「變數」提升撰寫CSS效率

這一天要講的是SASS「變數功能」,

首先模擬一些寫純CSS容易會遇到的情境

1.一個網站內有四組文字連結顏色樣式,總CSS程式碼有5000行,有文字連結顏色的設定共98行。當客戶想要改某一個文字顏色樣式時,就必須花時間逐行去修改。
2.要修改全域設定的網頁樣式時,時常必須用滾輪或肉眼從數百行中找出你要改的程式碼,像字型樣式、網站總體寬度等等。
這一天要講的是SASS「變數功能」,

首先模擬一些寫純CSS容易會遇到的情境

1.一個網站內有四組文字連結顏色樣式,總CSS程式碼有5000行,有文字連結顏色的設定共98行。當客戶想要改某一個文字顏色樣式時,就必須花時間逐行去修改。
2.要修改全域設定的網頁樣式時,時常必須用滾輪或肉眼從數百行中找出你要改的程式碼,像字型樣式、網站總體寬度等等。

所以今天主要則是教各位該如何使用Sass變數來解決這樣的問題,
首先我們先來看一段CSS碼,

.header a{
  color: #000;
}
.menu a{
  color: blue
}
.footer a{
  color: #000;
}
.nav a{
  color: blue
}

在建置網頁時,美術設計師都會設計數組文字連結顏色,
像上面就是在各個div裡面的設定文字顏色都不一樣,
所以當如果我要修改的時候就必須逐行去瀏覽並修正,
雖然可以透過一些工具全選並替換字串,
但也容易會漏掉一些少設定的code,

但如果是Sass的話就很方便就可以設定完成,
程式碼如下:

$link-color-1: #000
$link-color-2: blue
.header a
  color: $link-color-1
.menu a
  color: $link-color-2
.footer a
  color: $link-color-1
.nav a
  color: $link-color-2

首先先在程式碼最上面打個『$』字號,後面則是自己命名的變數,
像因為我有兩個連結樣式,所以我就命名成link-color-數量,
所以在當我打Sass時,如果有用到連結樣式,我就可以引入變數來取代。
如下影片(建議以720P+全螢幕瀏覽):
Yes

全選的部分我是全選住範圍後按「Ctrl+D」,sublime便會自動幫我全選起其他地方的相同名稱。

--

除了支援色碼外還支援「字串」、「數字」等等,
雙引號的字串也可用 #{ }取出來,尤其是在樣式class名稱替代上。
如下影片:
Yes

所以從上述的變數介紹就可得知,
有很多全域的設定你都可透過變數來調整,
就不用再一直狂滾滾輪來找程式碼了,

像以我常用的全域設定就有下述幾種
$text-color:pink→預設文字顏色
$link-color:#000→文字連結樣式,多則就再加紹數字
$link-color-hover:#fff→滑鼠拖曳過後的樣式顏色
$font-size:13px→全域字型大小,如一網站有多種就下多種字型
$line-height:1.8→全域行距
$container-width:960px→ 網站整體寬度
$font-style:"Helvetica Nueue", Arial, Sans Serif; →全域字型

Sass變數的好處相信大家已經可以看得出端倪了,
在以往我們都必須倚靠滾輪或用眼睛搜尋對應的程式碼來修改,
但透過Sass變數,我們只要看前2~30行的變數設定便可輕鬆地改全域網站的CSS程式碼,

相對來說在開發、維護、調整上都相當的便利嘍。


上一篇
30天掌握Sass語法 - (2)SASS該怎麼寫?會和純CSS寫法差很多嗎?
下一篇
30天掌握Sass語法 - (4)利用Sass「內建計算機」,讓你不用再重複計算CSS像素
系列文
30天掌握Sass語法41
0
Jackson
iT邦新手 5 級 ‧ 2015-09-16 14:20:58

搭上sass列車讚

我要留言

立即登入留言