iT邦幫忙

4

30天掌握Sass語法 - (16)如何將別人撰寫的CSS Framework轉換成Sass格式

我們常常會看到國外的有名大神們都會釋出CSS framework,
只要引入他的CSS檔案後,你就可以使用他的樣式進來。
而這次的主題則便是跑一次相關的流程給大家看,
該如何將別人已經寫好的CSS know how,將他轉換為自己的Sass格式。
這次要挑選的樣式則是,
將a連結與input的樣式一致性,
像類似這樣:

或許你可能會想說,
同一排那就乾脆都統一用a連結或input做就好,
為什麼還必須將他併排在一起?
這個狀況很常會發生在註冊欄位上,你寫了很多資料時,
通常都必須用submit按鈕將他提交,
所以通常下方都會有[送出]、[取消]按鈕,
取消的按鈕則視情況會做成連結,讓他回到上一頁去,
所以這時就會出現此情況,必須input與a都具有相同按鈕樣式。

這一次介紹的CSS Framework叫做Pure,
出處則源自於Yahoo,
在網頁樣式瀏覽器兼容性這一塊做得非常完美,
我有些Sass內容也是以它當作基底來開發的,
這一次的設定流程,
則是將裡頭設定a與input可長得一模一樣的CSS碼提取出來,
並編譯到自己的Sass裡面去。

將其轉換的步驟流程為:
一、到Customize去下載按鈕樣式
二、將下載下來CSS用線上編譯網站工具轉成Sass
三、再把Sass修改為@extend格式,也就是將class前面的. 轉換為%。

或許會有人覺得納悶,
為何要這麼費工地將他存到Sass裡面?
我只要網頁檔載入他的CSS不就可以了?

原因為通常別人做好的CSS framework往往動輒100k上下,
但有的時候你只是單純要他某幾個功能而已,
所以會希望說,可以將它你認為精華的部分抽取出來,

所以當你import _mixin.sass或 _extend資料夾時,
就看是要用Mixin加上變數,讓他在修改上更靈活些,
或者是透過@extend,等我有用到時,再提出該段程式碼,並進行合併動作。

不過是使用Mixin與@extend,
都只有在使用到才會把該段程式碼編譯出來,
並不是所有都會編譯出來變成CSS,
就不會像是傳統的那樣,
每次要使用bootstrap核心時,
就一定要先載入一整個大的bootstrap.css才可以使用其功能了,
網頁容量相對也減少許多嘍。

Mixin與@extend觀念其實在前面六章都講過了,
如果這部分細節你還是不太了解,
建議您再回頭瀏覽加深印象,
或者是留言給我,看是哪個細節我講得不太清楚,
我會再進行補充。

所以在一些網頁設計師的SASS資料夾裡面,
還會再分細一點有mixin資料夾,
分別將各個模組的_xxx.sass進行分類,
例如button/_btn-pure.scss、button/_btn-bootstrap.css
並視專案的類型來載入對應的sass檔案,
透過這樣子的方式,來讓自己的Sass更加地完整,
同時加速自己的工作效率。

於此也附上自己轉換的過程,
提供給大家參考學習^_^

延伸閱讀:
http://thesassway.com/beginner/how-to-structure-a-sass-project


尚未有邦友留言

立即登入留言