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
$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 個欄位。
@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;
}
@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 之間。
$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;
}
}
元素可以這麼寫
[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 拿掉了，官方希望你有需要再手動加入
// 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);
}
Comments