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更改失敗

回答

相關問題