iT邦幫忙

DAY 5
8

30天掌握Sass語法系列 第 5

30天掌握Sass語法 - (5)利用Sass「@import」進行CSS檔案模組切割

在以往寫CSS時,
動輒數百、數千行,
寫多了就會很難找各CSS片段的位置,
且滾輪都必須滾很久才會找到對應的程式碼,
所以都會在CSS上寫註解,
至少用搜尋或找位置時都比較方便,

但使用了Sass的@import功能,
就可以把CSS程式碼切成好幾份來做檔案管理,
最後編譯出來合併成一個CSS檔案,
在管理上自然方便得多。
在以往寫CSS時,
動輒數百、數千行,
寫多了就會很難找各CSS片段的位置,
且滾輪都必須滾很久才會找到對應的程式碼,
所以在以往都會在CSS寫註解,
至少用搜尋或找位置時都比較方便,

但使用了Sass的@import功能,
就可以把CSS程式碼切成好幾份來做檔案管理,
最後編譯出來合併成一個CSS檔案,
在管理上自然方便得多。

Sass可以編譯成CSS檔,
但如果將Sass檔案命名前面加個『_』的話,
那就不會編譯出來,例:「_reset.sass」,

所以通常我們會只保留一個編譯的Sass檔,
在裡面寫要載入的_xxx.Sass檔,
利用@import功能就可以將程式碼都載入到編譯的Sass檔,

如下影片:
任務是,將all.sass檔案,載入_index.sass首頁與_page.sass內頁的sass檔,
這樣往後我要修改首頁的css就只要改_index.sass檔案,
程式碼也就精簡聚焦多了,在維護與開發上自然也比較輕鬆。
Yes

1.00:00秒:先新增兩個準備載入到default.sass的檔案,分別是_index.sass與_page.sass
2.00:50秒:調換上下important順序就可以看出css碼也會跟著上下調動位置。
3.01:19秒:切到css資料夾去看,就只會合併編譯出default.css,並不會載入index與page,因為檔名前面加了「_」。

利用Sass import功能,
就可以將程式碼切成各模組區塊,
程式碼較少,同時也較能準確聚焦欲修改的區塊。
所以以一個版型來說通常可切割如下:

@import reset
@import layout
@import index
@import page

最上面自然就放css reset,
下面則是依序為整體layout、首頁、內頁,
如果你還有載入其他人撰寫的sass樣式檔,自然就會更多。

比起純CSS必須看一整個擠在一起的程式碼,
透過Sass import可讓你在維護、開發上可更佳地便利,
如果你已開始在用Sass,那就從現在就開始規劃你的import檔吧^_^!


上一篇
30天掌握Sass語法 - (4)利用Sass「內建計算機」,讓你不用再重複計算CSS像素
下一篇
30天掌握Sass語法 - (6)利用Sass「@mixin」,讓你省去重複撰寫相同CSS樣式的時間
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Kathy Lai
iT邦新手 5 級 ‧ 2016-12-08 12:13:44

想請教一下編輯器如何做到左邊sass右邊css呢?
找不到類似外掛,我使用的是sublime Text 3

Jackson iT邦新手 4 級 ‧ 2016-12-10 19:46:30 檢舉

影片中是利用FireApp,Sublime外掛沒有。

Jackson iT邦新手 4 級 ‧ 2016-12-10 19:46:32 檢舉

/images/emoticon/emoticon15.gif

我要留言

立即登入留言