iT邦幫忙

DAY 9
4

30天掌握Sass語法系列 第 9

30天掌握Sass語法 - (9)如何逐步建立自己的CSS資料庫

今日教學重點:
(1)用_mixin.sass來整理自己曾經寫過的CSS
(2)使用Compass CSS3一鍵匯出多種瀏覽器支援語法
(3)你相信嗎?Compass可以解析算出圖片的寬高!

網頁設計師在撰寫CSS時,
通常都會用一些工具來整理自己曾經寫過的CSS碼,
日後只要複製貼上,再微調一些樣式後便可以重複再利用。

舉例來說使用:
(1)Dreamweaver 片段工具,將程式碼的片段儲存到Dreamveaver裡面
(2)使用sublime text 3的snippet工具,打熱鍵便可將程式碼呼叫出來
(3)整理出一個乾淨的版本儲存在雲端硬碟(Dropbox、Evernote),要使用時隨時可呈現出來。

但如果是用Sass的話,
你可以利用@Mixin、@extend來整理自己的程式碼,
來提升你撰寫程式碼的效率,
以及逐步建立自己的CSS資料庫,
如下影片內容:
Yes
今日教學重點:
(1)用_mixin.sass來整理自己曾經寫過的CSS
(2)使用Compass CSS3一鍵匯出多種瀏覽器支援語法
(3)你相信嗎?Compass可以解析算出圖片的寬高!

網頁設計師在撰寫CSS時,
通常都會用一些工具來整理自己曾經寫過的CSS碼,
日後只要複製貼上,再微調一些樣式後便可以重複再利用。

舉例來說使用:
(1)Dreamweaver 片段工具,將程式碼的片段儲存到Dreamveaver裡面
(2)使用sublime text 3的snippet工具,打熱鍵便可將程式碼呼叫出來
(3)整理出一個乾淨的版本儲存在雲端硬碟(Dropbox、Evernote),要使用時隨時可呈現出來。

但如果是用Sass的話,
你可以利用@Mixin、@extend來整理自己的程式碼,
來提升你撰寫程式碼的效率,
以及逐步建立自己的CSS資料庫,
如下影片內容:
Yes

從影片內容中,
再次解說了一次@import的重要性,
它可以將Sass程式碼進行合併,
然後最後再輸出成CSS,

通常來說reset的CSS一定是放最上面的,
如果你沒有自己的reset的話,那也是可以用compass預設的reset:

@import compass/reset

如果你有用到變數的地方,
那也請記得變數必須放在你要使用的程式碼的上方,
這樣才有辦法繼承到,因為Sass的程式碼是從上到下來進行程式判斷的,

影片內容中,
我展示了了一般傳統寫CSS的連結圖片取代文字的流程,
如果是純寫CSS,你需要記的語法與短期性記憶的東西會較多,
短時間需要記憶的是:
1.背景圖片的名稱(logo.png)
2.圖片寬度像素(355px)
3.圖片高度像素(60px)

CSS程式碼為:

.header h1 a {
  background: url("../images/logo.png");
  width: 315px;
  height: 55px;
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

但如果是用Sass的話,
你只要寫這幾行就收工了,
編譯出來的程式碼自動就會變成上面的CSS碼

.header h1 a
 +bg(logo,png)
 display: block
 +text-hide	

當然這並不是魔術,
而是我寫了一些@mixin來加速我的開發效率:

@mixin bg($name,$bg) 
  background: url("../images/#{$name}.#{$bg}")
  width: image-width("../images/#{$name}.#{$bg}")
  height: image-height("../images/#{$name}.#{$bg}")
@mixin text-hide
  white-space: nowrap
  text-indent: 100%
  overflow: hidden

而image-width("圖片路徑")與image-height("圖片路徑")的語法,
就是Compass其中一種強大的功能,
它可以自動幫你去計算該圖片的高與寬的像素,
所以往後如果你圖片有修改高寬的話,
直接丟進圖片資料夾就會自動幫你計算高度了,
真的是十分方便的語法之一。

而text-hide則是圖片取代文字的做法,
在早期我們都是用text-indent:-99999px來解決,
但由於行動裝置的興起,用這語法會導致行動裝置瀏覽器為了渲染這寬度,
在效能上會變得很慢,所以才又會有人發明出這個新的解法。

而這三行程式碼又很難去背誦,
所以我就寫入到了我的_mixin.sass檔案去,
以後我要使用時,隨時都可以載入,
而且你也不用怕因為這樣導致你的程式碼便多,
因為mixin並不會載入到你的css去,
除非你有在sass載入進來,它才會編譯出來。

一開始你也可以不用下定決心使用Sass,
你可以評估你目前的網頁設計流程,
該如何使用mixin、extend、變數來進行效率優化,
等到你的mixin夠多了以後,再轉用Sass語法效率自然會飛躍性地提升。
這裡也推薦一個Sass framework,裡頭也蒐集了不少mixin,
http://bourbon.io/

最後再提到compass支援CSS3的功能,
首先你要先在Sass檔案引入compass CSS3。

@import compass/css3

再來他寫Sass的方式如下:

.header a
 +border-radius(50px)
 +opacity(0.2)
 +box-shadow(3px 3px 5px #000)

而編譯出來的CSS程式碼會變成如下:

.header a{
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
  -webkit-box-shadow: 3px 3px 5px black;
  -moz-box-shadow: 3px 3px 5px black;
  box-shadow: 3px 3px 5px black;
}	

很令人吃驚吧?
一行程式碼就可以自動編譯出所有CSS3的前綴瀏覽器支援,
Compass預設也有很多Mixin可以用,不單單只是這幾個小功能而已,
後面我們會再慢慢地介紹。

延伸閱讀:
Compass CSS3支援列表:
http://compass-style.org/reference/compass/css3/


上一篇
30天掌握Sass語法 - (8)Sass、Compass環境安裝流程教學
下一篇
30天掌握Sass語法 - (10)如何建立自己的Sass Reset CSS
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
sheephead081
iT邦新手 4 級 ‧ 2013-09-24 09:40:27

awesome!開心

0
k236740
iT邦新手 5 級 ‧ 2014-08-01 18:39:28

這個好,每次寫css3屬性的時候最討厭寫前綴詞,嗯!這個省了很多麻煩

我要留言

立即登入留言