Compass Susy：「With-Grid-Settings（）」 - 無法獲得溝槽寬度的工作

Question

我遇到了Susy與Compass的問題。

我想在桌面大小創建一個網格，然後更改移動大小的網格設置。

我嘗試使用with-grid-setting mixin，但是我只能更改列和網格填充，但是不會更改排版寬度和列寬。

代碼如下：

 $total-columns : 16;   
     $column-width : 6em;   
     $gutter-width : 6em;    
     $grid-padding : 3em; 

    @media (#{$tablet-min}) and (#{$tablet-max}) { 
      .l_content { 
      @include container; 
      } 
    }; 

    @media (#{$desktop-min}) and (#{$desktop-max}) { 
     @include with-grid-settings(8,6em,10em,10em) { 
      .l_content { 
      @include container; 
      } 
     }; 
    }; 

.content-item { 
    @include span-columns(8, 16); 

    &.omega{ 
     @include span-columns(8 omega, 16); 
    } 
} 

DOM元素：

<div class="l_content"> 
    <div class="content-item"> 
    <div class="content-item omega"> 
</div> 

我知道我可以使用在斷點（）混入，但避免它現在。

我試過這段代碼的很多變體，但沒有運氣。我在開啓@ susy-grid-background時看到的奇怪之處在於網格發生了變化，但網格中的元素不會移動。

Eric Meyer如果你在那裏，我會非常感激你的幫助！我已閱讀你的所有答案，但沒有取得任何成功。

編輯＃1 這些是寫的兩個mixin。第一個處理列和外部填充。第二個處理邊距和列大小。外部網格設置將應用於容器元素，內部網格設置將應用於列元素。希望我充分理解這一點，這是有幫助的。

@mixin outter-grid-settings(
    $columns, 
    $outter-padding 
){ 
    @include with-grid-settings($columns, 1, 1, $outter-padding){ 
    @content; 
    }; 
} 

@mixin inner-grid-settings(
    $column-width, 
    $column-margin 
){ 
    @include with-grid-settings(1, $column-width, $column-margin, 1){ 
    @content; 
    }; 
} 

Answer 1

Sass不知道DOM，這意味着Susy元素沒有意識到它們的容器，除非你明確地表明這個連接。爲此，您必須在每個斷點處更改跨度輸出以及容器輸出。您的span-columns(8, 16)僅基於您的全局設置爲您提供輸出。您需要在媒體查詢/ with-grid-settings組合中添加新的跨度。

.content-item { 
    @include span-columns(8, 16); 

    &.omega{ 
     @include span-columns(8 omega, 16); 
    } 

    @media (#{$desktop-min}) and (#{$desktop-max}) { 
     @include with-grid-settings(8,6em,10em,10em) { 
      @include span-columns(8, 16); 
     }; 
    }; 
} 

這看起來重複的，但它不是 - 因爲意義span-columns(8, 16)改變您更改設置的任何時間。你可以通過在mixin中包裝東西來幹這個的各個部分，但這取決於你。這就是我們爲at-breakpoint所做的一切，你可以按照自己的方式來做。