4至3列与欧米茄与Susy更改失败

这当然是最简单的一些代码来显示：4至3列与欧米茄与Susy更改失败

.container{ 
    .gallery { 
     ul { 
      @include clearfix; 
     } 
     li { 
      @include span-columns(1,4); 

      &:nth-child(4n) { 
       @include omega; 
      } 
     } 
    } 

    @include at-breakpoint($large-columns) { 
     .gallery { 
      li { 
       @include span-columns(1,3); 

       &:nth-child(4n) { 
        @include remove-omega; 
       } 
       &:nth-child(3n) { 
        @include omega; 
       } 
      } 
     } 
    } 
}

我开始了与4列与第4个是欧米茄，然后我想改变超过3列，第三个是欧米茄。正确的元素是正确的左/右浮动，但每4个错误的边缘 - 右...

我正在做对吗？或者说，我做错了什么？

感谢您的阅读， /安迪

来源

2013-04-11 Andy Moreno

你可以在codepen或jsfiddle上显示工作代码吗？ – Zendy 2013-04-11 02:57:07

恩，不是真的，因为它取决于Susy ......基本上，预处理器的输出是错误的。你可以在这里看到它：http://codepen.io/andymoreno/pen/EcKHC – 2013-04-11 03:33:23

我测试了你的codepen，它似乎工作正常。最初它会是4列，但当最小宽度达到59em时，它会变成3列。这是你期望它的工作原理吗？ – Zendy 2013-04-11 04:03:07

你的问题是误导，因为我们不知道的$large-columns值。我认为价值可能是59em 3 - 但是，这是完美的。它看起来实际上只是59em - 这是造成你的问题。

如果您设置了没有列数的断点，Susy会根据您的$column-width和$gutter-width设置计算新的上下文。这对span-columns(1,3)不会造成任何问题，因为您用明确的一个（3）覆盖全局上下文。但是remove-omega也需要知道上下文（以便应用排水沟），并且不传递一个 - 因此它使用全局上下文。

你有两个选择：

您可以更改断点：at-breakpoint(59em 3)
你可以传递一个明确的背景：remove-omega(3)。

来源

2013-04-11 04:39:17

$ column-width = 4em，$ gutter-width = 1em，$ large-columns = 12.对不起，我没有意识到这些值会使计算工作有所不同。应该为任何值工作？ – 2013-04-11 04:49:31

恩，我不知道我明白了...我是否没有明确地删除上面第4项的欧米茄？ – 2013-04-11 04:51:39

您正在移除欧米茄，但您并不了解上下文影响计算的方式。您的断点将上下文设置为12列，但“span-columns（1,3）”覆盖上下文为3.您需要确保“span-columns”和“remove-omega”获得相同的上下文。 'span-columns（4）'和'remove-omega'（都将采用12的全局上下文）或'span-columns（1,3）'和'remove-omega（3）'（都使用3 ）。或者你可以改变断点来设置一个全局语境为3的'at-breakpoint（59em 3）'。 'remove-omega'相对于上下文来说增加了一个阴沟。 – 2013-04-11 05:03:39

4至3列与欧米茄与Susy更改失败

回答

相关问题