在不同的断点处使用不同的 Susy 配置
Use different Susy config at different breakpoints
我正在尝试为我的布局设计中的两个断点使用两个不同的 Susy 网格全局配置:平板电脑和桌面。
这是我的 _variables.scss 代码:
// Susy Sass Grid System Config
$susy: (
columns: 12,
column-width: 45px,
global-box-sizing: border-box,
gutters: 18px / 45px,
gutter-position: inside,
math: static,
output: float,
);
$susy-desktop: (
columns: 12,
column-width: 67px,
global-box-sizing: border-box,
gutters: 30px / 67px,
gutter-position: inside,
math: static,
output: float,
);
@include susy-breakpoint(1200px, $susy-desktop, false);
当宽度达到 1200px 时,如何才能获得 $susy-desktop
配置。 mixin 似乎不起作用。正常配置 $susy
工作正常。
如果需要更多信息,请告诉我,非常感谢您抽出宝贵时间! ;)
susy-breakpoint
mixin 是一个需要内容的包装器。它将添加一个媒体查询,并更改所有 传递给它的设置 :
@include susy-breakpoint(1200px, $susy-desktop, false) {
/* This code will use the $susy-desktop settings at 1200px */
@include span(3);
}
使用susy-breakpoint
不传入内容将没有效果。
我正在尝试为我的布局设计中的两个断点使用两个不同的 Susy 网格全局配置:平板电脑和桌面。
这是我的 _variables.scss 代码:
// Susy Sass Grid System Config
$susy: (
columns: 12,
column-width: 45px,
global-box-sizing: border-box,
gutters: 18px / 45px,
gutter-position: inside,
math: static,
output: float,
);
$susy-desktop: (
columns: 12,
column-width: 67px,
global-box-sizing: border-box,
gutters: 30px / 67px,
gutter-position: inside,
math: static,
output: float,
);
@include susy-breakpoint(1200px, $susy-desktop, false);
当宽度达到 1200px 时,如何才能获得 $susy-desktop
配置。 mixin 似乎不起作用。正常配置 $susy
工作正常。
如果需要更多信息,请告诉我,非常感谢您抽出宝贵时间! ;)
susy-breakpoint
mixin 是一个需要内容的包装器。它将添加一个媒体查询,并更改所有 传递给它的设置 :
@include susy-breakpoint(1200px, $susy-desktop, false) {
/* This code will use the $susy-desktop settings at 1200px */
@include span(3);
}
使用susy-breakpoint
不传入内容将没有效果。