iT邦幫忙

DAY 19
5

30天掌握Sass語法系列 第 15

30天掌握Sass語法 - (19) Sass @Mixin and Compass結合運用範例

在之前我們都是在講關於Sass與Compass的語法教學,
這次我們來談談該如何使用Sass Mixin與Compass該如何結合,
才可以提升網頁設計師撰寫CSS碼的效率。

首先我們先來預設一個設計情境

設計目的:
要在一個DIV裡面載入完整背景圖片、
為了將其完整呈現,
我們同時必須將圖片的高度與寬度記錄下來,
讓他與背景圖案的高寬一致。
設計流程:
流程1.用編輯器寫到一半後,
到資料夾尋找檔案名稱,
並用大腦去暫時記憶他的「檔名」、「高度」、「寬度」
流程2:回到編輯器後一一撰寫時,
又突然忘記了寬度的像素,
於是又回到資料夾再確認一次圖片高度
流程3:回到編輯上再補上高度設定的CSS。

從上述的流程可以得知,
網頁設計師在去設定圖片的寬度和檔名時,
時常必須去透過短暫記憶來記東西,
但這動作做久以後,
大腦其實很容易就會因為過度記憶而感到勞累。

所以透過Compass的image-width()與image-height()的話,
就可以讓Compass自動算出圖片的寬高出來。

所以你就可以寫像這樣子:

//Sass語法
@import compass
.logo
  width: image-width('../images/logo.png')
  width: image-height('../images/logo.png')
  background: url(../images/logo.png)

編譯出來就會像這樣子:

.logo {
  width: 512px;
  width: 512px;
  background: url(../images/logo.png);
}

很神奇吧?
Compass自動會去幫你解讀圖片的寬度,
將你把像素帶進去,
但其實這樣子還是不夠的,
因為今天我要寫一個寬度時,
還必須寫他引入的image-width與路徑,
寫的程式碼還是很多,
不如還是照原來做法比較好。

但如果你把它用成@Mixin的話,
那就好用多了,
像下述寫法:

@mixin bg($img) 
  background: url("../images/#{$img}")
  width: image-width("../images/#{$img}")
  height: image-height("../images/#{$img}")
.logo
  +bg('logo.png')

如果你的變數帶進去,前後有程式碼時,
你可以用#{變數}的方式將值帶進去,
圖片路徑就看你的CSS與images圖片的資料夾對應位置就可找到,
透過這樣子的方式,
以後我只要記一個圖片名稱就好,
就不用一次記那麼多東西了,
是不是很方便呢^_^?

所以透過這樣的方式,
你也可以去尋找如何將Compass的語法進行運算,
來化解過於繁瑣的流程。

這裡也附上影片提供各位參考學習:


上一篇
30天掌握Sass語法 - (18)規劃你的Sass結構
下一篇
30天掌握Sass語法 - (20) 利用@Mixin與Sass運算建立Grid System
系列文
30天掌握Sass語法41

1 則留言

我要留言

立即登入留言