susy 2.0 在断点处更改列 [英] susy 2.0 change columns at breakpoint
问题描述
- 我没有使用指南针
- 我更喜欢使用 Breakpoint.scss
- 我在使用 susy 2.0
我知道有很多关于这个问题的帖子,但我有 0 次运气找到关于这个主题的 Breakpoint.scss
和 Susy 2.0
.
I know there are lot of posts with this question but I'm having 0 luck finding any regarding Breakpoint.scss
and Susy 2.0
on this topic.
@import "susy";
@import "breakpoint";
$medium: 800px;
$susy: (
columns: 6,
gutters: 3/4,
gutter-position: split
);
@include breakpoint($medium) {
$susy: layout(12 1/4 split);
}
body {
@include container(show);
@include breakpoint($medium) {
@include container(show);
}
}
我是否必须使用 susy-breakpoint
或者可以实现这样的目标?我想要 6 列在/低于 800 像素和 12 列在/高于 800 像素
Do I have to use susy-breakpoint
or can something like this be achieved?
I want 6 columns at anything at/below 800px and 12 at/above 800px
我试图保持 DRY,所以在我的样式中添加一个 susy-breakpoint 无济于事.
I'm trying to stay DRY so adding a susy-breakpoint in my styles does not help.
我也试过下面的代码,但我想我只是在某处出错,导致它无法正常工作.
I've also tried below code but I think I just have an error somewhere cause it's not working.
$susy: layout(6 1/4 split);
$small: 400px, 6 1/4 split;
$medium: 800px, 8 1/4 split;
$large: 1000px, 12 1/4 split;
@mixin media($size) {
@include susy-breakpoint($size...) {
@content;
}
}
body {
@include container(show);
@include media($small) {
@include container(show);
}
// debugging. didnt work either
@include susy-breakpoint($small...) {
@include container(show);
}
}
推荐答案
我不知道你的 media
mixin 是做什么的,所以我无法真正评论与此相关的任何内容.您最初的示例不起作用,因为 Sass、CSS 和 Susy 不知道 DOM - 或媒体查询之间的关系.当您在一个媒体查询中更改 $susy
的值时,这不会传播到所有类似的媒体查询上下文.因此,每次您想要断点更改布局上下文时,您都必须同时设置媒体查询和所需的布局.
I don't know what your media
mixin does, so I can't really comment on anything related to that. Your initial example doesn't work because Sass, CSS, and therefor Susy, are not aware of the DOM - or relationships between media-queries. When you change the value of $susy
inside one media-query, that does not propagate to all similar media-query contexts. Because of that, you do have to set both the media-query and the desired layout every time you want a breakpoint to change the layout context.
susy-breakpoint
不是唯一的方法,但它是最短的.这是简写:
susy-breakpoint
is not the only way to do that, but it is the shortest. Here's the longhand:
body {
@include container(show);
@include breakpoint(800px) {
@include with-layout(8) { // default is set to 8-columns
@include container(show);
} // default is returned to global setting
}
}
您的 $small
断点当前不会改变任何东西,因为它与您的默认布局相同.较大的将更改嵌套代码的布局上下文——尽管您可以简化:由于1/4 拆分"装订线根本没有变化,因此不需要在每个断点处重新声明它们.
Your $small
breakpoint currently doesn't change anything, because it is identical to your default layout. The larger ones will change the layout context for nested code — though you can simplify: Since `1/4 split' gutters aren't changing at all, they don't need to be re-stated at every breakpoint.
$susy: layout(6 1/4 split);
$medium: 800px, 8;
body {
@include container(show);
@include susy-breakpoint($medium...) {
@include container(show);
}
}
这将与上面的简写相同.
That will be identical to the longhand above.
这篇关于susy 2.0 在断点处更改列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!