2018-05-02 / JSN / 4 Comments / 467 views
先了解 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
|
|
$susy: ( 'min-width': 0px, 'columns': susy-repeat(4), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', ); |
建議的簡單組合
為了方便巢狀 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 柵欄
|
|
$susy: ( columns: susy-repeat(12, 5em), ); |
前後各 20px 柵欄，中間重複 3 個 100px 柵欄
|
|
$susy: ( columns: 20px susy-repeat(3, 100px) 20px, ); |
自動處理 Span 對齊
SUSY3 之前，都有 @include @span() 自動對其格線左右兩側 (其實就是 float: left | right)，不過在 3 拿掉了，這是因為現在有了 flexbox 與更新的 grid 屬性可以選用， float 排版不再是首選。當然 float 這個老方法的支援度最全面，若你跟我一樣偏好 float 的話，那我們參考官方建議自訂一個 @mixin span()
|
|
@mixin span( $span, $config: $susy ) { width: span($span, $config); @if index($span, 'last') { float: right; } @else { float: left; margin-right: gutter(); } } |
這樣我們使用 @include span(4); 或 @include span(4 last); 就可以做到 float: left 與 float: right 的效果了。
斷點設計
參考官方教學，添加以下兩個自訂的 with-layout 與 susy-breakpoint 即可快速的在不同尺寸底下使用不同的柵欄。例如 Div 在 Mobile 底下佔 2 欄位，但在 Pad 底下站 4 個欄位。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@mixin with-layout( $config ) { // parse and normalize any shorthand arguments $config: susy-compile($config); // record the global settings - // and update the global variable with our new settings $global: $susy; $susy: map-merge($susy, $config) !global; // any content inside this mixin // will use the local settings @content; // return the global variable to its initial value $susy: $global !global; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@mixin susy-breakpoint( $config ) { // parse and normalize any shorthand arguments $config: susy-compile($config); // build min-and-max queries $min: map-get($config, 'min-width'); $min: if($min, '(min-width: #{$min})', null); $max: map-get($config, 'max-width'); $max: if($max, '(max-width: #{$max})', null); // combine them if we need both $and: if($min and $max, '#{$min} and #{$max}', null); // or fall back to the value we need… $query: $and or $min or $max; // apply the results… @media #{$query} { @include with-layout($config) { @content; } } } |
接著添加三個裝置的名稱設定，你可以依照需求增減。其中透過 min-width 指定斷點，例如 $pad 會作用在 0~799px 之間。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$mobile: ( 'min-width': 0px, 'columns': susy-repeat(4), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', ); $pad: ( 'min-width': 800px, 'columns': susy-repeat(8), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', ); $desktop: ( 'min-width': 1280px, 'columns': susy-repeat(12), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', ); |
所以 container 可以這麼寫 (參考)，這樣就能產生不同尺寸縮放的背景柵欄，很適合開發階段使用。
|
|
.container { @include susy-breakpoint($mobile) { background: svg-grid() no-repeat scroll; height: 100%; } @include susy-breakpoint($pad) { background: svg-grid() no-repeat scroll; } @include susy-breakpoint($desktop) { background: svg-grid() no-repeat scroll; } } |
元素可以這麼寫
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
[data-span] { @include susy-breakpoint($mobile) { // 手機樣式 background: #ff0000ab; line-height: 10rem; text-align: center; color: white; font-size: 5rem; } @include susy-breakpoint($pad) { // 平板樣式 background: #52b752; } @include susy-breakpoint($desktop) { // 桌電樣式 background: #6666d0; } } |
我們來看範例，背景 0-799px 紅色，800-1279px 綠色，1279px 以上藍色。
Gallery
susy2 有好用的 gallery ，但在 3 拿掉了，官方希望你有需要再手動加入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// https://github.com/oddbird/susy/issues/648 @mixin gallery( $span, $config: () ) { $grid: susy-compile($span, $config); $span: map-get($grid, 'span'); $column-count: length(map-get($grid, 'columns')); $count: floor($column-count / $span); $spread: map-get($grid, 'spread') + 2; $container-spread: map-get($grid, 'container-spread') + 2; $extra: ($container-spread - $spread) * 0.5; $extra-push: su-call('su-gutter', $grid) * $extra; float: left; margin-right: -100%; @for $n from 1 through ($count) { $nth: unquote('#{$count}n + #{$n}'); $location: $span * ($n - 1) + 1; &:nth-child(#{$nth}) { $width: susy-compile($span at $location, $grid); width: su-call('su-span', $width); @if ($location > 1) { $wide: susy-compile('first' $location - 1 'wide', $grid); clear: none; margin-left: su-call('su-span', $wide) + $extra-push; } @else { clear: both; margin-left: if($extra-push > 0, $extra-push, 0); } } } } |
之後，我們要顯示例如相簿，這種每一行左右貼其兩側的話，就非常簡單只要這樣就可以
|
|
.box { @include gallery(4 of 12); } |
2018-05-02 / JSN / 2 Comments / 749 views
前言
Susy3 是一個大改版，隨著 CSS 前端的潮流趨勢，精簡了許多 Susy 2 的功能，也廢除了所有 mixin。在第三版的標語是
Your design, our math
Susy 3 推動的計畫是完全客製你自己的網格系統(柵欄系統)，比起 Bootstrap 能做到更天馬行空的版面設計。整體而言只保留非常簡單的概念 span()、gutter() 。
|
|
// class names are for demonstration only… .float { width: span(3); margin-right: gutter(); } .flexbox { flex: 1 1 span(3); padding: 0 gutter() / 2; } .push-3 { margin-left: span(3 wide); } |
可以簡單製作尺寸的樣式
|
|
$large-screens: ( 'columns': susy-repeat(12, 4em), 'gutters': 1em, ); nav { @media (min-width: 40em) { width: span(3 wide, $large-screens); } } |
為了輕量化與快速編譯，其他如好用的斷點 mixin 設定，官方則建議若有需要請自行黏貼，好在這些擴充非常的簡單。
讓 Susy 負責做複雜的算數，其他呈現的設計例如排版使用 float 或是 flexbox， Susy 則不做預設限制，也不用再去記複雜的 mixin。官方文章提到，如果你已經開始使用 CSS Grid module 那麼就忘記使用 Susy 吧，但如果還不是，你則可以借助 Susy 來替你做複雜的柵欄溝槽運算。
安裝
以下使用 webpack 4.8.3 來安裝 SUSY，當然這部分的教學包含了實用的 webpack 架構的方法，例如避免重複生產程式碼、全域使用程式碼…….直接貼上程式碼是可以運作的。以下安裝 webpack, sass, susy3, compass。注意，你的專案名稱若在測試的時候不可以取名為 susy 喔，否則安裝 susy 的時候會被擋下來。
|
|
npm init -y npm install --save-dev webpack webpack-cli sass-loader node-sass style-loader css-loader mixin-loader compass-mixins webpack-glob-folder-entries susy |
若要透過 npm 安裝套件可以這樣寫，我在這篇範例中加入了這兩個 jQuery Plugin供後續示範
|
|
// 下載已經在 npm 註冊 npm install jquery vmodel.js // 若要下載沒有註冊在 npm 的 github 檔案，"git+https://" 後方填入 github 網址 npm install git+https://github.com/.......js.git |
這裡奇怪的是連續使用 npm install git+https 例如
|
|
npm install git+https://github.com/......js.git npm install git+https://github.com/......js.git |
npm 會把前一個 git 套件給刪除，所以請使用空白連接的寫法
|
|
npm install git+https://github.com/......js.git git+https://github.com/......js.git |
或是寫在 package.json 中，然後使用 npm install 或 npm update 下載。
路徑架構
我的範例專案名稱設定為 susy3-demo，專案底下這麼設計，檔名路徑都先建立好
- assets/ (( 整合資源的目錄
- dist/ (( 原文是 distribution ，JS 會由 webpack 自動產出
- src/ ((原文是 source 代表我們手工編撰的程式碼
- javascript/
- md/ (( 範例：我用來放置 JS 模型的地方，每個檔案代表每個模型
- global/ (( 範例：全域使用的共用 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ "name": "susy3-demo", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "jquery": "^3.3.1", "vmodel.js": "^1.7.5" }, "devDependencies": { "compass-mixins": "^0.12.10", "css-loader": "^0.28.11", "mixin-loader": "^2.0.3", "node-sass": "^4.9.0", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "susy": "^3.0.5", "webpack": "^4.14.0", "webpack-cli": "^3.0.8", "webpack-glob-folder-entries": "^1.0.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" <------------- 添加 }, "keywords": [], "author": "", "license": "ISC" } |
設定 webpack 輸入輸出
webpack.config.js，我們透過 splitChunks 把共用的部分分離至 vendors.js。分離出來我認為很重要，因為
- 開發上 compile 的時候不需要每次更新就要把第三方套件一併 compile ，或是寫 JS 卻還要編譯 沒更動到的 CSS ，可以省下許多等候時間。
- 讓 web 切換頁面的時候，僅下載該頁面獨用的 JS 檔，然後直接使用上一頁 cache 過的 JS 共用檔(例如第三方套件 jQuery, Lodash 或是我們自訂的全域 CSS )，節省流量開銷。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
const webpack = require('webpack'); const path = require('path'); module.exports = { // 監聽 watch: true, // development (開發模式未壓縮) | production (產品模式可壓縮) mode: 'production', // 進入點，每個頁面使用一個 JS 檔 entry: { index: './assets/src/javascript/index.js', content: './assets/src/javascript/content.js' }, // 自動輸出位置，我們對應到 ./assets/dist/[檔名].js output: { path: path.resolve(__dirname, 'assets/dist'), // JS 輸出點路徑 filename: '[name].js' }, // 優化設置 optimization: { // 分離區塊 splitChunks: { chunks: 'initial', cacheGroups: { // 將 import 路徑出現 "\node_modules\" 或 "\md\global\" 或 "\scss\global\" 底下的共用程式碼 // 分離到 vendors.js vendors: { test: /[\\/]node_modules[\\/]|[\\/]md[\\/]global[\\/]|[\\/]scss[\\/]global[\\/]/, name: "vendors", } } } }, // 讓 jQuery 可以在不同的文件使用 plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), ], // SUSY SASS 相關設置 module: { rules: [{ test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader", // compiles Sass to CSS options: { includePaths: ["./assets/src/scss"] // 指定讀取的位置 } }] }] } }; |
SCSS 設定檔
assets/src/scss/config/_global.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 使用 susy, 參考 http://oddbird.net/susy/docs/ @import "~susy/sass/susy"; // 使用 susy plugin, 參考 http://oddbird.net/susy/docs/plugin_svg-grid.html @import "~susy/sass/plugins/svg-grid"; // 使用 compass @import "~compass-mixins/lib/compass"; // 載入 設定檔 @import "./config/susy"; // 載入 mixin @import "../mixin/susy/with-layout"; @import "../mixin/susy/susy-breakpoint"; @import "../mixin/susy/gallery"; @import "../mixin/susy/span"; |
SUSY MAP 設定檔
assets/src/scss/config/_susy.scss，不同的 map 定義都放在這裡，日後調整斷點或整體外框也能方便許多。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$susy: ( 'columns': susy-repeat(4), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', ); $mobile: ( 'min-width': 0px, 'columns': susy-repeat(4), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', ); $pad: ( 'min-width': 480px, 'columns': susy-repeat(8), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', ); $desktop: ( 'min-width': 800px, 'columns': susy-repeat(12), 'gutters': 0.25, 'spread': 'narrow', 'container-spread': 'narrow', ); |
依照你的喜好添加 Mixin
相關說明已在上面說過囉
assets/src/scss/mixin/susy/_gallery.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// https://github.com/oddbird/susy/issues/648 @mixin gallery( $span, $config: () ) { $grid: susy-compile($span, $config); $span: map-get($grid, 'span'); $column-count: length(map-get($grid, 'columns')); $count: floor($column-count / $span); $spread: map-get($grid, 'spread') + 2; $container-spread: map-get($grid, 'container-spread') + 2; $extra: ($container-spread - $spread) * 0.5; $extra-push: su-call('su-gutter', $grid) * $extra; float: left; margin-right: -100%; @for $n from 1 through ($count) { $nth: unquote('#{$count}n + #{$n}'); $location: $span * ($n - 1) + 1; &:nth-child(#{$nth}) { $width: susy-compile($span at $location, $grid); width: su-call('su-span', $width); @if ($location > 1) { $wide: susy-compile('first' $location - 1 'wide', $grid); clear: none; margin-left: su-call('su-span', $wide) + $extra-push; } @else { clear: both; margin-left: if($extra-push > 0, $extra-push, 0); } } } } |
assets/src/scss/mixin/susy/_susy-breakpoint.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@mixin susy-breakpoint( $config ) { // parse and normalize any shorthand arguments $config: susy-compile($config); // build min-and-max queries $min: map-get($config, 'min-width'); $min: if($min, '(min-width: #{$min})', null); $max: map-get($config, 'max-width'); $max: if($max, '(max-width: #{$max})', null); // combine them if we need both $and: if($min and $max, '#{$min} and #{$max}', null); // or fall back to the value we need… $query: $and or $min or $max; // apply the results… @media #{$query} { @include with-layout($config) { @content; } } } |
assets/src/scss/mixin/susy/_with-layout.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@mixin with-layout( $config ) { // parse and normalize any shorthand arguments $config: susy-compile($config); // record the global settings - // and update the global variable with our new settings $global: $susy; $susy: map-merge($susy, $config) !global; // any content inside this mixin // will use the local settings @content; // return the global variable to its initial value $susy: $global !global; } |
assets/src/scss/mixin/susy/_span.scss
|
|
@mixin span( $span, $config: $susy ) { width: span($span, $config); @if index($span, 'last') { float: right; } @else { float: left; margin-right: gutter(); } } |
SUSY 樣式檔
assets/src/scss/global/global.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@import "../config/global"; // 使用 compass 提供的重設所有瀏覽器預設屬性 @import "~compass-mixins/lib/compass/reset"; * { box-sizing: border-box; } html, body { height: 100%; } .container { // 寫法可參考範例 http://oddbird.net/2017/06/13/susy-spread/ @include susy-breakpoint($mobile) { background: svg-grid() no-repeat scroll; height: 100%; margin: 0 gutter(); } @include susy-breakpoint($pad) { background: svg-grid() no-repeat scroll; margin: 0 gutter(); } @include susy-breakpoint($desktop) { background: svg-grid() no-repeat scroll; margin: 0 gutter(); } } |
index.scss
|
|
@import "config/global"; .message { background: #d23f3f; color: white; height: 100px; font-size: 18px; line-height: 100px; text-align: center; } |
content.scss
|
|
@import "config/global"; .message { background: #5186D9; color: white; height: 100px; font-size: 18px; line-height: 100px; text-align: center; } |
JavaScript 載入樣式檔
提供給首頁使用的引入 SASS(SCSS) 與添加 jQuery 、jQuery 外掛，我們檢視能否正確執行。
assets/src/javascript/index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 載入 SCSS import '../scss/global/global.scss'; import '../scss/index.scss'; // 載入 jQuery Plugin import 'vmodel.js'; // 載入會使用到的 JS 程式碼 import './md/global/menu.js'; import './md/form.js'; // 若要全域使用加入這塊 window.$ = $ window.jQuery = $ $(function (){ console.log('來自 index.js') $.vmodel.get("menu", true); $.vmodel.get("form", true); }) |
其中看到 window.$ 這是讓 jQuery 在任何地方都可以被使用，若不加的話那麼只能在這份 JS 檔使用 $。
assets/src/javascript/content.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 載入 SCSS import '../scss/global/global.scss'; import '../scss/content.scss'; // 載入 jQuery Plugin import 'vmodel.js'; // 載入會使用到的 JS 程式碼 import './md/global/menu.js'; // 若要全域使用加入這塊 window.$ = $ window.jQuery = $ $(function (){ console.log('來自 content.js') $.vmodel.get("menu", true); }) |
接著添加 vmodel.js 模組範例
assets/src/javascript/md/global/menu.js
|
|
$(function (){ $.vmodel.create({ selector: 'body', model: '--menu', isautoload: false, method: function (){ var vs = this; this.autoload = ['init']; this.init = function (){ console.log('初始化 menu，所有頁面都會用到') } } }); }) |
assets/src/javascript/md/form.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function (){ $.vmodel.create({ selector: 'body', model: '--form', isautoload: false, method: function (){ var vs = this; this.autoload = ['init']; this.init = function (){ console.log('初始化 form，只有單頁用到') } this.say = function (){ console.log('來自 form::say()') } } }); }) |
執行
在首頁呈現
載入兩份 JS，包含共用程式碼與該頁獨用的程式碼。我在 <script> 中加入了 $ 呼叫 jQuery 是要測試是否全域可用，因為我們上面寫過 window.$ = $ 的關係。
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="assets/dist/vendors.js?t=<?=uniqid()?>"></script> <script src="assets/dist/index.js?t=<?=uniqid()?>"></script> <script> $(function (){ console.log('全域使用 jQuery') }) </script> </head> <body> <div class="container"> <div class="message"> 首頁使用 index.js，<a href="content.php">前往內頁</a> </div> </div> </body> </html> |
content.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="assets/dist/vendors.js?t=<?=uniqid()?>"></script> <script src="assets/dist/content.js?t=<?=uniqid()?>"></script> </head> <body> <div class="container"> <div class="message"> Hi, 這是內頁，內頁使用 content.js </div> </div> </body> </html> |
打開瀏覽器以後，除了能看到 SUSY 樣是之外，還能檢視 console.log ，了解 JS 與 SCSS 被分割在哪些位置。
下一篇我們了解如何使用 Susy3。
2014-12-02 / JSN / 0 Comments / 1,346 views
下面錄製了一些SUSY2的教學，網路影片教學中文的應該不多，大概就 Mr. liao 的 youtube 影片。大家也可以先去看看他的講解，我這邊的影片主要就是一個字一個字key進去囉。基本上可以讓你很快地進入狀況，但學習的條件，就是至少要懂CSS的進階語言SASS, SCSS。 有時間會錄製製作RWD版面的過程喔。
若想看其他的文字對於SUSY2的解說，可以參考：
陸續都還會有不定期更新SUSY2的筆記，也歡迎大家使用搜尋功能囉。
網路上也有一份有系統的 SASS/SCSS/SUSY 相關教學，可以參考廖洧杰的相關文章
2014-11-30 / JSN / 0 Comments / 673 views
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
//susy 環境設定 $susy: ( flow: ltr, // 左至右rtl | 右至左 ltr math: fluid,// fluid 流變% | static 固定單位，會依照 column-width 設定的單位是px 或em output: float, // float 使用浮動概念 | isolate 為隔離獨立的概念，會產生重疊的可能。未來會提供 flexbox 或 grid 或其他方式 gutter-position: after , // before 在前方使用margin | after 在後方使用margin | split 在前後使用margin | inside 在前後使用 padding 但網格的邊緣不會被刪除，當math: fluid的時候維持流變 | inside-static 在前後使用 padding 但網格的邊緣不會被刪除，當math: fluid的時候仍使用static固定單位 container: auto, // 指定總寬度 | auto 自動計算 container-position: center, // left 靠左 | center 置中 | right 靠右 columns: 12, // 欄位數量, 若是手機優先，那代表的是手機的柵欄數量 gutters: 1/3, // 溝相對於欄位的幾分之幾 column-width: 60px, // 指定柵欄寬度 | false/null 自動計算, 但必須要當 math: fluid 流變的時候 global-box-sizing: border-box, // 全域的。border-box 可以當使用padding的時候不會超出總寬度，也就是CSS的 "box-sizing: border-box;" | content-box 一般狀況 last-flow: to, // from 當排列最後一個元素如 @include span(last 1 of 12); 時會從起始處往結尾排列過去，所以會造成往前一個元素靠，也就是套用 float:left 而不是 float:right | to 反之 location: null, // null | first/alpha | last/omega | 數字 box-sizing: null, // null | border-box | content-box spread: null, // null | narrow 單一欄位寬度 | wide 單一欄位寬+單側gutter | wider 單一欄位寬+兩側gutter gutter-override: null, // null | no-gutters/no-gutter 無溝, 如使用 span() 會不使用gutter做配合 | 獨立於整體背景欄位的 gutters: 1/3, 可自訂一個gutter數量如50px role: nest, // null | nest debug: ( image: show, // show | hide | show-columns | show-baseline color: rgba(#66f, .25), // 柵欄色彩 output: background, // background 柵欄出現在背景 | overlay 出現浮動鈕，移過去才會顯示柵欄 toggle: top right, // right | left and top | bottom 若使用 output: overlay 出現浮動鈕的位置 ), use-custom: ( background-image: true, // 是否使用背景欄位圖片 background-options: true, // 是否啟用背景欄位選用功能 box-sizing: true, // false 輸出相容語法如 -moz 或 -webkit | true 視存在的mixin box-sizing 來套用 clearfix: false, // false 使用內部的 mixin | true 視存在的mixin clearfix 套用，若不存在會套用內部的 micro-clearfix rem: true, // false 長度(length)會直接使用 css | true 視存在的 mixin rem ) ); |