susy 2.0 change columns at breakpoint

|▌冷眼眸甩不掉的悲伤 提交于 2019-12-01 10:47:31

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 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
  }
}

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!