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 (( 編輯的 scss,也就是我們 susy 編寫的地方。完整部屬可參考這裡。
  • node_modules/ (( 開發時會用到的 node.js 相依開發模組,正式發佈不需要上傳
  • package-lock.json
  • package.json (( node.js 設定與相依套件設定
  • webpack.config.js (( webpack 設定檔
  • index.php (( 範例:首頁
  • content.php (( 範例:內容頁

 

設定

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

 

設定 webpack 輸入輸出

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

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

 

 

寫入 SUSY 樣式檔

這個範例包含使用了 compass 重設 HTML 樣式。可以依需求不使用喔! SUSY 架構這裡只使用極為簡單的範例,要詳細的可參考這篇:SUSY3 – 部屬架構(3)

assets/src/scss/global.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

 

 

Comments

  1. Good, thanks for sharing!

發表迴響