CSS – SUSY3 – 使用方法(2)

先了解 3 個方法

了解安裝以後,接著只要這三個方法就能解決複雜的 RWD。

1. span()

跨越一個或多個 column 與 gutter 的佔位寬度。可透過 margin 或 padding 來推拉你的元素。

2. gutter()

3. slice()

很少用,在製作不對稱的柵欄系統時會用到。我暫時還搞不懂,之後學會了再補上來。

 

config

整體設定說明,參考

  • min-width:自訂添加的斷點,給我們的 mixin susy-breakpoint() 使用
  • columns:多少個柵欄
  • gutters:流變溝槽是 columns 的倍數,也可以是靜態單位 px
  • spread:擴散元素的溝槽,narrow (沒有), wide (兩側:0.5 + 0.5 = 1), or wider (兩側 1 + 1 = 2)
  • container-spread:擴散 container 的溝槽,同 spread

 

建議的簡單組合

為了方便巢狀 span() 的計算,spread 與 container-spread 使用官方預設就好。我們習慣在螢幕邊框兩側,加入 gutter() 可以方便手指滑動。

  • spread: narrow
  • container-spread: narrow

spread 與 column 數量的關係(參考官方說明),在算總體寬度的時候可以注意一下,看自己希望怎麼使用:

  • narrow:gutters = columns – 1
    • 兩側沒有 gutter 所以 4 個柵欄會有 0 + 3 + 0 個溝槽
  • wide:gutters 等於 columns
    • 兩側各 0.5 單位溝槽,所以 4 個柵欄會有 0.5 + 3 + 0.5 個溝槽
  • wider:gutters = columns + 1
    • 兩側各 1 單位溝槽,所以 4 個溝槽會有 1 + 3 + 1 個溝槽

若要重複 12 個 5 柵欄

前後各 20px 柵欄,中間重複 3 個 100px 柵欄

 

自動處理 Span 對齊

SUSY3 之前,都有 @include @span() 自動對其格線左右兩側 (其實就是 float: left | right),不過在 3 拿掉了,這是因為現在有了 flexbox 與更新的 grid 屬性可以選用, float 排版不再是首選。當然 float 這個老方法的支援度最全面,若你跟我一樣偏好 float 的話,那我們參考官方建議自訂一個 @mixin span()

這樣我們使用 @include span(4); 或 @include span(4 last); 就可以做到 float: left 與 float: right 的效果了。

斷點設計

參考官方教學,添加以下兩個自訂的 with-layoutsusy-breakpoint 即可快速的在不同尺寸底下使用不同的柵欄。例如 Div 在 Mobile 底下佔 2 欄位,但在 Pad 底下站 4 個欄位。

接著添加三個裝置的名稱設定,你可以依照需求增減。其中透過 min-width 指定斷點,例如 $pad 會作用在 0~799px 之間。

所以 container 可以這麼寫 (參考),這樣就能產生不同尺寸縮放的背景柵欄,很適合開發階段使用。

元素可以這麼寫

我們來看範例,背景 0-799px 紅色,800-1279px 綠色,1279px 以上藍色。

 

Gallery

susy2 有好用的 gallery ,但在 3 拿掉了,官方希望你有需要再手動加入

之後,我們要顯示例如相簿,這種每一行左右貼其兩側的話,就非常簡單只要這樣就可以

CSS – SUSY3 – 安裝教學(1),透過 webpack 從頭開始建立架構

前言

Susy3 是一個大改版,隨著 CSS 前端的潮流趨勢,精簡了許多 Susy 2 的功能,也廢除了所有 mixin。在第三版的標語是

Your design, our math

Susy 3 推動的計畫是完全客製你自己的網格系統(柵欄系統),比起 Bootstrap 能做到更天馬行空的版面設計。整體而言只保留非常簡單的概念 span()、gutter()

可以簡單製作尺寸的樣式

為了輕量化與快速編譯,其他如好用的斷點 mixin 設定,官方則建議若有需要請自行黏貼,好在這些擴充非常的簡單。

讓 Susy 負責做複雜的算數,其他呈現的設計例如排版使用 float 或是 flexbox, Susy 則不做預設限制,也不用再去記複雜的 mixin。官方文章提到,如果你已經開始使用 CSS Grid module 那麼就忘記使用 Susy 吧,但如果還不是,你則可以借助 Susy 來替你做複雜的柵欄溝槽運算。

 

安裝

以下使用 webpack 4.8.3 來安裝 SUSY,當然這部分的教學包含了實用的 webpack 架構的方法,例如避免重複生產程式碼、全域使用程式碼…….直接貼上程式碼是可以運作的。以下安裝 webpack, sass, susy3, compass。注意,你的專案名稱若在測試的時候不可以取名為 susy 喔,否則安裝 susy 的時候會被擋下來。

若要透過 npm 安裝套件可以這樣寫,我在這篇範例中加入了這兩個 jQuery Plugin供後續示範

這裡奇怪的是連續使用 npm install git+https 例如

npm 會把前一個 git 套件給刪除,所以請使用空白連接的寫法

或是寫在 package.json 中,然後使用 npm install 或 npm update 下載。

 

路徑架構

我的範例專案名稱設定為 susy3-demo,專案底下這麼設計,檔名路徑都先建立好

  • assets/ (( 整合資源的目錄
    • dist/ (( 原文是 distribution ,JS 會由 webpack 自動產出
      • xxxxx.js (( 自動產生的 JS
    • src/ ((原文是 source 代表我們手工編撰的程式碼
      • javascript/
        • md/ (( 範例:我用來放置 JS 模型的地方,每個檔案代表每個模型
          • global/ (( 範例:全域使用的共用 JS
            • menu.js (( 範例:共用的 JS
          • form.js (( 範例:單頁所需使用的 JS
        • index.js (( 範例:首頁的 JS 進入點,也包含 SCSS
        • content.js (( 範例:內頁的 JS 進入點,也包含 SCSS
      • scss/
        • global/ (( 會共用的 SCSS 都放在這裡
          • global.scss (( 編輯的 scss,也就是我們 susy 編寫的地方。完整部屬可參考這裡
        • config/ (( 設定檔都放這
          • _global.scss (( 全域引入,包含使用設定、載入需要的 mixin
          • _susy.scss (( 放置 susy map 的部分,包含斷點的設置都在這裡
        • mixin/ (( 日後擴增的 mixin 位置
          • susy/ (( 放置官方提供的片段
            • _gallery.scss (( 參考官方建議 如 susy2 的 gallery 一行解決相簿模式排列
            • _susy-breakpoint.scss (( 如 susy2 的斷點,讓元素在不同尺寸切換樣式
            • _with-layout.scss (( 給斷點使用 layout
            • _span.scss (( 使用 float 快速排版,當然你也可以把 float 換成 display: flexbox, inlin-block 或其他方法
        • index.scss
        • content.scss
  • node_modules/ (( 開發時會用到的 node.js 相依開發模組,正式發佈不需要上傳
  • package-lock.json
  • package.json (( node.js 設定與相依套件設定
  • webpack.config.js (( webpack 設定檔
  • index.php (( 範例:首頁,當然也以用 HTML 檔
  • content.php (( 範例:內容頁,當然也以用 HTML 檔

 

設定

在 npm 自動產生的 package.json 添加 build

 

設定 webpack 輸入輸出

webpack.config.js,我們透過 splitChunks 把共用的部分分離至 vendors.js。分離出來我認為很重要,因為

  1. 開發上 compile 的時候不需要每次更新就要把第三方套件一併 compile ,或是寫 JS 卻還要編譯 沒更動到的 CSS ,可以省下許多等候時間。
  2. 讓 web 切換頁面的時候,僅下載該頁面獨用的 JS 檔,然後直接使用上一頁 cache 過的 JS 共用檔(例如第三方套件 jQuery, Lodash 或是我們自訂的全域 CSS ),節省流量開銷。

 

 

SCSS 設定檔

assets/src/scss/config/_global.scss

 

SUSY MAP 設定檔

assets/src/scss/config/_susy.scss,不同的 map 定義都放在這裡,日後調整斷點或整體外框也能方便許多。

 

依照你的喜好添加 Mixin

相關說明已在上面說過囉

assets/src/scss/mixin/susy/_gallery.scss

 

assets/src/scss/mixin/susy/_susy-breakpoint.scss

 

assets/src/scss/mixin/susy/_with-layout.scss

 

assets/src/scss/mixin/susy/_span.scss

 

SUSY 樣式檔

assets/src/scss/global/global.scss

 

index.scss

 

content.scss

 

JavaScript 載入樣式檔

提供給首頁使用的引入 SASS(SCSS) 與添加 jQuery 、jQuery 外掛,我們檢視能否正確執行。

assets/src/javascript/index.js

其中看到 window.$ 這是讓 jQuery 在任何地方都可以被使用,若不加的話那麼只能在這份 JS 檔使用 $。

 

assets/src/javascript/content.js

 

接著添加 vmodel.js 模組範例

assets/src/javascript/md/global/menu.js

 

assets/src/javascript/md/form.js

 

執行

 

在首頁呈現

載入兩份 JS,包含共用程式碼與該頁獨用的程式碼。我在 <script> 中加入了 $ 呼叫 jQuery 是要測試是否全域可用,因為我們上面寫過 window.$ = $ 的關係。

index.php

 

content.php

 

打開瀏覽器以後,除了能看到 SUSY 樣是之外,還能檢視 console.log ,了解 JS 與 SCSS 被分割在哪些位置。

 

下一篇我們了解如何使用 Susy3

 

 

SUSY2 – 影片教學

下面錄製了一些SUSY2的教學,網路影片教學中文的應該不多,大概就 Mr. liao 的 youtube 影片。大家也可以先去看看他的講解,我這邊的影片主要就是一個字一個字key進去囉。基本上可以讓你很快地進入狀況,但學習的條件,就是至少要懂CSS的進階語言SASS, SCSS。 有時間會錄製製作RWD版面的過程喔。

 

若想看其他的文字對於SUSY2的解說,可以參考:

陸續都還會有不定期更新SUSY2的筆記,也歡迎大家使用搜尋功能囉。

網路上也有一份有系統的 SASS/SCSS/SUSY 相關教學,可以參考廖洧杰的相關文章

sass – scss – susy – css – 排版速記表

 參考

susy – scss – map 環境設定解說