Susy 2.1.3关于断点布局变化的问题 [英] Susy 2.1.3 issue regarding layout change on breakpoint

问题描述

帮助我把你变成时髦的susy's，我正处在我的突破点！我正在努力为我的项目做出最有效的布局，并且我遇到了一些我无法用Susy /断点找出的东西。

我希望布局列在断点处更改，而不必更改div的所有单独跨度（因为以这种方式将会有许多不同的跨度宽度。而不是仅仅改变1和改变3或4个不同的列布局）。

现在我能够得到这个工作的唯一方法是通过改变div的跨度并保持列不变，但我希望div始终保持相同的大小，然后根据需要填充的列数来放置到位。

I认为这只是我写@include的方式。我尝试过在断点内部做容器/布局，而不是with-layout，但没有成功。
我知道这可能是一个简单的修复，我只是没有看到。

编辑：另外我注意到的是，无论我如何改变事情的div总是采取默认的$ susy地图，并没有改变它在断点处。

SCSS：

  @import'susy'; 
 @import'breakpoint'; 
 
 $ layout1：布局（12 .125分流体中心）; 
 $ layout2：布局（16 .125分割流体中心）; 
 $ layout3：布局（24 .125 split fluid center）; 
 
 .container {
 @include container; 
 @include with-layout（$ layout1）; 
 background：orange; 
 
 @include breakpoint（600px）{
 @include with-layout（$ layout2）; 
背景：红色; 
} 
 
 @include breakpoint（1000px）{
 @include with-layout（$ layout3）; 
背景：蓝色; 
} 
 
} 
 
 .testbox {
 @include span（1）; 
 
  

html：

 < div class =container> 
 
< div class =testbox> hello< / div> 
< div class =testbox> hello< / div> 
< div class =testbox> hello< / div> 
< div class =testbox> hello< / div> 
< div class =testbox> hello< / div> 
< div class =testbox> hello< / div> 
< div class =testbox> hello< / div> 
< div class =testbox> hello< / div> 
 
< / div> 
  

解决方案

with-layout 仅更改用于嵌套在其中的Susy mixins / em 的设置：



  @include with-layout（$ layout2）{
 //此处嵌套的代码将使用$ layout2设置
} 
  

您对 with-layout 的任何调用都没有嵌套 - 因此没有任何更改。这正是@cimmanon试图在评论中解释的。同样， @media 只会改变直接嵌套在内部的东西 - 所以你的颜色变化很好，但是你的跨度不变。颜色实际上是嵌套的，跨度不是。

由于Sass是预处理的，所以 span（1）除非被多次调用，否则不能有多个输出。现在你只需要调用一次，所以它有一个输出。如果你在不同的布局上下文中多次调用它，你可以得到不同的结果。

  //这会给你不同的跨度不同的断点：$ b​​ $ b @include breakpoint（600px）{
 @include with-layout（$ layout2）{
 @include span（1）; 
背景：红色; 
} 
} 
 
 //你也可以使用susy-breakpoint快捷方式：
 @include susy-breakpoint（1000px，$ layout3）{
 @include span（1）; 
背景：蓝色; 
} 
  

Help me out you sassy susy's, I am at my breaking point! I am trying to make the most efficient layout for my project, and I have come across something I havn't been able to figure out with Susy/breakpoint.

I want the layout columns to change at the breakpoints and not have to change all the individual spans of the div's (as there will be many different span widths with this way. Instead of just 1 and changing 3 or 4 different column layouts).

Right now the only way I was able to get this to work was by changing the spans of the divs and keeping the columns unchanged, but I would like the divs to always stay the same size and then just drop into place depending on how many columns are left to fill.

I think it is just the way I am writing the @include. I have tried doing container/layout inside the breakpoint instead of with-layout with no success. I know this is probably going to be a simple fix that I am just not seeing.

Edit: Also something I have noticed is that no matter how I change things the div is always taking the default $susy map and is not changing it at breakpoint.

SCSS:

@import 'susy';
@import 'breakpoint';

$layout1: layout(12 .125 split fluid center);
$layout2: layout(16 .125 split fluid center);
$layout3: layout(24 .125 split fluid center);

.container {
  @include container;
  @include with-layout($layout1);
  background: orange;

    @include breakpoint(600px) {
      @include with-layout($layout2);
      background: red;
    }

    @include breakpoint(1000px) {
      @include with-layout($layout3);
      background: blue;
    }

}

.testbox {
  @include span(1);  
}

html:

<div class="container">

  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>
  <div class="testbox">hello</div>

</div>

解决方案

with-layout only changes the settings used for Susy mixins/functions nested inside it:

@include with-layout($layout2) {
  // code nested here will use the $layout2 settings
}

You have nothing nested inside any call to with-layout - therefor no changes. This is exactly what @cimmanon was trying to explain in the comments. Similarly, @media only changes things nested directly inside it — so your colors change fine, but your spans don't. The colors are actually nested, the spans aren't.

Because Sass is pre-processed, span(1) cannot have multiple outputs unless it is called multiple times. Right now you call it once, so it has one output. If you call it multiple times inside different layout contexts, you can get different outputs.

// This will give you different spans at different breakpoints:
@include breakpoint(600px) {
  @include with-layout($layout2) {
    @include span(1);
    background: red;
  }
}

// you can also use the susy-breakpoint shortcut:
@include susy-breakpoint(1000px, $layout3) {
  @include span(1);
  background: blue;
}

这篇关于Susy 2.1.3关于断点布局变化的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！