iT邦幫忙

DAY 44
1

Sass3.3 & CSS設計模式系列 第 45

Sass教學(44) - Sass教學手冊導讀

  • 分享至 

  • xImage
  •  

Sass教學手冊目錄連結

**目前的你是否適合使用Sass**
如果你來到這裡,代表著你對CSS有著一定的了解,
為了讓你能夠儘快進入學習狀況,
這個章節主要是逐步教你如何掌握Sass。

在你決定要學Sass前,
你可以先瀏覽這兩篇文章,
來評估這個語言適不適合現在的你:

  1. 什麼是SASS?它真的能加速我寫CSS的效率嗎?
  2. SASS該怎麼寫?會和純CSS寫法差很多嗎?

以我自己的經驗,最好是設計過幾個網站再來碰Sass會比較好些,
至少要知道css reset、了解box-model、行內塊狀的觀念,
會使用float、position來排版,
如果上面的詞彙你仍一知半解的話,
目前的你可能還不適合學習Sass,
因為Sass是一個更有效率地維護CSS的語言,
如果你在基礎沒打好就直接學Sass那麼學習曲線會變得相當高。

最後Sass有提供兩種寫法,一種是SCSS,它可以完全像是傳統CSS來撰寫,
你甚至把副檔名從.css改為.scss也ok,
對設計師來說比較容易上手,也是目前比較多人用的格式。
另外一種則是Sass,寫法比較乾淨,但需要多些時間來學習,有興趣的可以瀏覽此篇文章:SASS該怎麼寫?會和純CSS寫法差很多嗎?

**環境建立**
要開始寫Sass前,不免俗地要建立Sass開發環境,
如果你是設計師,那就相當建議你購買Fire.appcodekit
這些軟體內建就有SASS、COMPASS開發環境,可省下你搞環境的流程,
Fire.app的用法之前我也曾寫過一篇文章,設計師們也可以前往參考。
如果你是工程師,那就可以考慮使用Command-line來安裝,
Windows可以參考這篇, Mac可以參考這篇,Susy的部份請跳過。
如果你暫時不想在電腦安裝任何軟體,想先嘗試Sass寫法的話,
可以到CodepenSassmeisterJS Bin的線上程式碼服務玩玩看,它們都有提供Sass格式的開發功能。

這個教學手冊主要都是使用Sublime text 3來進行開發,
如果你有其他順手的編輯器那也OK,
但假使你是用Dreamweaver的話,建議你也可以跟著我的教學流程來改用Sublime。
這裡也提供一些我的Sublime教學文件與影片:

  1. 如何透過Sublime text 3 plugin打造Sass開發環境
  2. go to anything - 可隨意移動檔案位置
  3. 個人常用熱鍵
  4. 簡報 - 換編輯器的動機

**究竟要學到哪個階段,才有辦法把CSS專案導入Sass?**
這個問題也是許多網頁設計師詢問率相當高的,
我第一個Sass專案實際上只有學一些基本功能就開始寫了,
至少你要懂得 變數計算@import@Mixin@extend、的功能,
是每位開發者都一定會碰到的基礎核心功能,
尤其是@import能夠讓你將程式碼切割成好幾份,
讓你能夠聚焦瀏覽你想要關注的code,
像我第一個使用Sass的專案,Sass結構長成這樣子:

@import "compass";
@import "mixin"; // 放置所有全域變數與Mixin
@import "reset"; // reset.css
@import "extend"; // 都放@extend用的檔案
@import "index"; // 首頁
@import "page.."; // 內頁

如果你上面五個基礎功能都學會了,
可參考這樣的結果試著寫第一個Sass專案,
而掌握要領則是:

  1. 試著將時常需要寫到的設定用成Variable(變數)
  2. 共通網頁樣式使用extend進行合併
  3. 嘗試使用Compass CSS3 Mixin
  4. 將各單元CSS切割出來Import

先試著用這樣的架構寫寫看,
學新東西最缺乏的就是踏出第一步,
其實SCSS程式碼跟CSS寫法是一樣的,
你也能把他單純當作CSS寫也沒關係,
只要你嘗試用了,那你就已經是進步了。

在設計過程中,你可以閱讀下表的連結來建立自己撰寫CSS的風格習慣:

  1. CSS-Guidelines
  2. Sass Style Guide(樣式指南) - Sass、Github、Codepen

一開始碰觸@mixin跟@extend的時候,兩者可能容易搞不清楚使用時機,
你可以瀏覽此篇文章來釐清觀念。

如果你不曉得到底該如何開始,
這裡也提供我個人的一步步上手Sass的教學流程提供參考:

  1. 切圖、規劃Layout
  2. Sass結構規劃、全域變數設定
  3. 網頁排版流程(上)
  4. 排版流程(下)

**開始學習設計模式**
在以前寫CSS時,
為了遵守一些設計模式時常會增加開發時間,
程式碼會變得越來越難維護。
但Sass內建的功能再加上Compass讓我們要導入設計模式就變得相當容易了。

當你嘗試寫了一個Sass專案後,
你可以開始學習SMACSS設計模式,
這是我覺得目前較容易學習的設計模式,
同時也相當適合導入Sass,
讓你的程式碼結構變得更加容易調整。

1.SMACSS - Base、Laout
2.SMACSS - Module Rules
3.SMACSS - State Rules
4.SMACSS - Theme Rules
5.SMACSS - 結構規劃與其它補充

SMACSS有提出一個推薦的Sass結構:

@import  
   "site-settings",  
   "mixins",  
   "base",  
   "states",  
   "layout/grid",  
   "module/btn",  
   "module/bookmarks",  
   "module/callout";  

site-setting的部份是基礎變數設定,
接續下來是mixins、base、states,
Grid的設定時常會建立在Layout上,
所以會有一個Grid的檔案統一管理,
再來Module就放你的獨立化的模組,
當你讀完SMACSS再回頭看這樣的架構,
相信會更有感覺。

我自己推薦的SMACSS架構是這樣:

@import "compass";
@import "mixin";  // 所有全域變數與Mixin  
@import "reset";  // reset.css  
@import "extend"; // 都放@extend用的檔案  
@import "layout"; // 共同框架,第一層
@import "module"; //button,form,table   
@import "pages/index、pages1、pages2 ";     

如果你想針對Sass結構有更深入了解,可以看這兩篇文章:
1.規劃你的Sass結構
2.如何逐步整合自己的Sass資料夾

當你學完後,可以再來依序學習OOCSS、BEM、MVCSS,
讓自己的架構可以適情況加入這些設計模式讓程式碼更加得靈活,
你可以先瀏覽這篇文章,來去評估學習路徑。
1.OOCSS
2.BEM
3.MVCSS - Styleguide
4.MVCSS - Foundation
5.MVCSS - Components、Structures
6.MVCSS - Manifest、Vendor

**除此之外,我還可以學哪些東西呢?**
Sass+Compass可以導入相當多的設計原理到程式碼內,
像是文字排版其中一種實踐方式為垂直韻律
Framework套用到Sass專案
使用Compass內建的功能來設計CSS Sprite
不用手動@import,sass-globbing輕鬆import所有sass檔
除此之外還有這些功能:

  1. 如何透過Sass&Compass支援CSS3動畫效果
  2. 利用@Mixin與Sass運算建立Grid System
  3. 如何讓你的CSS動畫更具動態效果
  4. @for+random()創造無限可能
  5. 透過index()與nth()來設計網站版本樣式控制管理
  6. 使用animate.scss增強網頁瀏覽體驗
  7. 如何使用Sass來管理你的Bootstrap
  8. @each+Sass Maps批次新增各元素樣式

再來你也可以瀏覽我自己比較常用的Sass 3.3的功能:
1.參考父選擇符:&
2.Sass 3.3 Source Maps
3.使用Sass Maps提升程式可讀、變數群組性

**Susy究竟好不好學?**
如果你要學Susy,
但是不懂Grid System的話,
建議要先了解Grid的演化史會較好些,
學習路徑是:960grid > bootstrap RWD grid > susy。
這樣你才能了解為什麼Susy那麼多人推薦。

Susy有兩個版本各別是Susy1與Susy2,
有人問我先學1以後學2會不會比較快?
其實1跟2差還蠻多的,直接學2比較好,
因為Susy2裡面就有Susy1的功能了。

Susy2的教學連結如下,記得要從第一章慢慢看起,
直接跳後面章節章節會看不懂的。
0.Susy2學習摘要
1.如何打造Susy2開發環境
2.Grid settings(上)
3.Grid settings(中)
4.Grid settings(下) debug Compass Vertical Rhythm
5.960Grid 固定版型(Fixed layout)設計
6.960Grid 流體版型(Fulid layout)設計,susy1>susy2轉換
7.mobile to desktop responsive grid with breakpoint
8.透過susy-breakpoint、layout設計RWD Grid
9.不對稱(Asymmetrical) RWD Grid
10.使用with layout讓版型同時存在兩種以上的Grid
11.實作Bootstrap3 RWD Grid
12.shorthand(簡寫)
13.Toolkit - span Mixin、function
14.Toolkit - gutter、container
15.Toolkit - Rows & Edges
16.Susy2 語法速記表
17.Susy2 網路教學資源
18.使用Susy2前,你必須要懂的CSS觀念

如果你仍有Susy1的專案,也可以瀏覽下面我寫的教學:
1.Susy Grid教學(上)
2.Susy Grid教學(下)
3.Off-Canvas layout with Susy
4.Susy 版型種類介紹 5.Compass Vertical Rhythm & Susy other setting
6.Susy RWD Grid排版流程(上)
7.Susy RWD Grid排版流程(下)

**總結**
相信透過這樣一系列的導讀,
你就能找到屬於自己學習Sass的流程,
有些連結沒有列上的部份你可以再到Sass教學手冊目錄連結來瀏覽。
遇到問題的話也歡迎透過Facebook聯繫我嘍^_^


上一篇
Sass教學(43) - Sass Style Guide(樣式指南) - Sass、Github、Codepen
下一篇
90天掌握Sass語法完賽心得 & 章節目錄
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kmo67143
iT邦新手 5 級 ‧ 2019-11-14 16:12:26

版大說明很詳細,本想納入參考範圍內,因為對於學習新手而言有非常大的幫助,
不過...後面連結幾乎都找不到了,有點可惜。

我要留言

立即登入留言