CSS – SCSS – SUSY2 – 配合 map, 自訂 breakpoint 斷點的 mixin
可以用 map 設定你需要的屏幕
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//設定三種尺寸 $break_layout : ( mobile: ( break: 0px, layout: 4 ), pad: ( break: 640px, layout: 8 ), desktop: ( break: 1280px, layout: 12 ) ); |
接著套上 mixin
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//方便撰寫的自訂 mixin 斷點樣式 @mixin _break($screen: mobile) { $map : map-get($break_layout, $screen); $break: map-get($map, "break"); $layout: map-get($map, "layout"); @include susy-breakpoint($break, $layout) { @content; } } |
然後在 SCSS 裡面就可以這麼寫了
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.container { @include _break("mobile") { @include container(); height: 100%; } @include _break("pad") { @include container(); } @include _break("desktop") { @include container(); } } |