susy 2.0在断点处更改列 [英] susy 2.0 change columns at breakpoint

问题描述

1. 我没有使用指南针


2. 我更喜欢使用Breakpoint.scss


3. 2.0

我知道有很多与此问题的帖子，但我有0运气发现任何 Breakpoint.scss 和 Susy 2.0 。

  @importsusy; 
 @importbreakpoint; 
 
 $ medium：800px; 
 
 $ susy：（
 columns：6，
 gutters：3/4，
 gutter-position：split 
）; 
 
 @include断点（$ medium）{
 $ susy：layout（12 1/4 split）; 
} 
 
 body {
 @include container（show）; 
 
 @include断点（$ medium）{
 @include container（show）; 
} 
} 
  

我必须使用 susy-breakpoint 或者可以实现这样的东西？
我需要6列在/以下/以下800px和12 at /高于800px

我试图保持干性，所以在我添加一个susy断点样式没有帮助。

我也试过下面的代码，但我想我只是有一个错误，因为它不工作。

  $ 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）; 
} 
 
 //调试。没有工作
 @include susy-breakpoint（$ small ...）{
 @include container（show）; 
} 
} 
  

解决方案

I不知道你的媒体 mixin，所以我不能真正地评论任何与此相关的。你的初始示例不工作，因为Sass，CSS及其为Susy，不知道的媒体查询之间的DOM或关系。当您在一个媒体查询中更改 $ susy 的值时，不会传播到所有类似的媒体查询上下文。因此，您必须在每次想要断点更改布局上下文时同时设置媒体查询和所需的布局。

susy-breakpoint 不是唯一的方法，但它是最短的。这里是长尾：

  body {
 @include container（show）; 
 
 @include断点（800px）{
 @include with-layout（8）{//默认设置为8列
 @include container（show）; 
} //默认返回全局设置
} 
} 
  

您的 $ small 断点当前不会更改任何内容，因为它与您的默认布局相同。较大的将改变嵌套代码的布局上下文 - 虽然你可以简化：由于`1/4 split'gutters没有改变，它们不需要在每个断点处重新表述。

  $ susy：layout（6 1/4 split）; 
 $ medium：800px，8; 
 
 body {
 @include container（show）; 
 
 @include susy-breakpoint（$ medium ...）{
 @include container（show）; 
} 
} 
  

p>

1. I'm not using Compass
2. I prefer to use Breakpoint.scss
3. I'm on 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);
  }
}

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

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

解决方案

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.

这篇关于susy 2.0在断点处更改列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！