Susy電網與susy斷點和固定天溝

我已經開始使用Susy，我對它的能力印象非常深刻。目前我正在建立一個網絡，我有4個媒體查詢：Susy電網與susy斷點和固定天溝

$mobile: 767px; 
$tablet: 768px; 
$small: 960px; 
$large: 1200px;

的最後兩個$小$大我想在PX兩列固定寬度和10px的排水溝。我不想在％中排水溝，因爲我想確保在所有瀏覽器中結果看起來都是平等的。

因此，對於固定colomnus我用超對稱斷點

@include susy-breakpoint($small, 24 1/1.5 split) { 
    .container { 
     @include container($small); 
    } 
    .main{ 
     .navigationWrap{ 
      @include span(24); 
     } 
     .articleWrap { 
      @include span(668px); 
     } 
     .advertisment { 
      @include span(240px); 
      .advBanner{ 
       float: right; 
      } 
     } 
    } 

} // END of 960px mq 

@include susy-breakpoint($large, 24 1/1.5 split) { 

    .container { 
     @include container($large); 
    } 

    .main{ 
     .navigationWrap{ 
      @include span(24);//span(4); 
     } 
     .articleWrap { 
      @include span(900px); 
     } 
    } 

} // END of 1200px mq

所以，我的主要問題：什麼是方法和最佳實踐，使固定不％排水溝（如1/1.5）有更多的控制權網格？

由於沒有人回答，我按照「我自己的方式」找到了固定的排水溝和colomns。

的設置是：

$susy: (
    columns: 24, 
    column-width: 40px, 
    gutter-width: 10px, 
    grid-padding: 10px, 
    gutter-position: split, 
    global-box-sizing: content-box, 
    math: static 
);

和主要SCSS：

//from 960px to 1200 
@include breakpoint($small) { 
    .container { 
     @include container($small); 
    } 
    .header{ 
     .header-logoWrap{ 
      @include span(242px); 
     } 
     .header-bannerWrap { 
      @include span(678px); 
      img { 
       float: right; 
      } 
     } 
    } 
    .main{ 
     .navigationWrap{ 
      @include span(930px); 
     } 
     .articleWrap { 
      @include span(670px); 
     } 
     .advertisment { 
      @include span(250px); 
      .advBanner{ 
       float: right; 
      } 
     } 
    } 

} // END 960px to 1200 

// from 1200 final 
@include breakpoint($large) { 
    .container { 
     @include container($large); 
    } 
    .header{ 
     .header-logoWrap{ 
      @include span(242px); 
     } 
     .header-bannerWrap { 
      @include span(918px); 
      img { 
       float: right; 
      } 
     } 
    } 
    .main{ 
     .navigationWrap{ 
      @include span(1170px); 
     } 
     .articleWrap { 
      @include span(910px); 
     } 
     .advertisment { 
      @include span(250px); 
      .advBanner{ 
       float: right; 
      } 
     } 
    } 
} // END of 1200px mq

但主要的問題仍然是開放的： - 什麼是已經定格和排水溝的最佳做法？

在我提出了一個代碼，我使用

跨度（PX）

怎樣安裝 $susy的情況下，我不以％

使用跨度colums

列：24，列寬：40px，

來源

2014-06-16 A1exandr

您的設置圖使用了susy1和s的混合usy2術語。 Susy忽略了大部分這些設置。我認爲這是你想要什麼：

$susy: (
    columns: 24, 
    column-width: 40px, 
    gutters: 10px/40px, 
    gutter-position: split, 
    global-box-sizing: content-box, 
    math: static 
);

的gutters設置總是相對的，但產量不會 - 因爲你正在使用static數學。您也可以在流體網格中使用靜態排水溝，但這是一個不同的問題。有沒有叫gutter-width或grid-padding', so those have been removed. Split gutters will leave you with half-gutter padding on the grid ( 5px的). If you want a full 10px`在邊緣設置，你可以做這樣的事情：

.container { 
    padding: 0 gutters(); 
}

來源

2014-06-22 21:19:54

Susy電網與susy斷點和固定天溝

回答

相關問題