需要幫助建立一個基於百分比的SASS網格系統

Question

我的數學是令人震驚&我不能，我的生活得到這個計算工作。我正在創建一個CSS網格系統，它允許用戶指定任意數量的網格列（默認情況下有12個），這些列之間的排水溝，圍繞該總寬度的邊緣的最大寬度&。有希望的結果是每個列寬度的百分比寬度爲所有列左邊距的百分比。

如果我使用下面的默認值，最大寬度將是1200px，左邊的&的內邊距將爲20，給出網格的最大允許空間的內部寬度1160。那有意義嗎？

我使用的是由上海社會科學院方式。看看代碼中的註釋，看看當前工作&無法正常工作。

這裏是的jsfiddle代碼：http://jsfiddle.net/mrmartineau/fMeBk/

$gridColumnCount  : 12; // Total column count 
$gridGutterWidth  : 40; // [in pixels] 
$gridColumnPadding : 30; // [in pixels] 
$gridMaxWidth   : 1200; // [in pixels] 
$gridMargin   : 20; // [in pixels] Space outside the grid 

@function gridColumnWidth() { 
    @return $gridMaxWidth/$gridColumnCount; 
} 
// Grid calculations 
@function gridColumnWidthCalc($colNumber) { 
    // Is correct 
    @if $gridGutterWidth == 0 { 
     @return percentage($colNumber/$gridColumnCount); 
    } 
    // Is incorrect 
    @else $gridMargin > 0 { 
     @return percentage((($colNumber/$gridColumnCount) - gutterCalc(false))); 
    } 
} 

@mixin columns($columnSpan: 1) { 
    width: gridColumnWidthCalc($columnSpan); 
} 
@function gutterCalc($showUnit: true) { 
    @if $showUnit == true { 
     @return percentage($gridGutterWidth/($gridMaxWidth - ($gridMargin * 2))); 
    } @else { 
     @return $gridGutterWidth/($gridMaxWidth - ($gridMargin * 2)) * 100; 
    } 
} 

@mixin gridColumn() { 
    @if $gridGutterWidth > 0 { 
     margin-left: gutterCalc(); 
    } 
    @if $gridColumnPadding > 0 { 
     padding: $gridColumnPadding + px; 
    } 
    float: left; 
    min-height: 30px; 
    position: relative; 
    clear: none; 
    &:first-child { 
     margin-left: 0; 
    } 
    background-color: pink; 
    border: 1px solid red; 
} 
@for $i from 1 to $gridColumnCount + 1 { 
    .span#{$i} { @include columns($i); } 
} 

.container { 
    padding-left: $gridMargin + px; 
    padding-right: $gridMargin + px; 
    max-width: $gridMaxWidth + px; 
} 

.col { 
    @include gridColumn(); 
} 


​ 

Answer 1

好了，我花了一個小時來理解你的commentless代碼。

首先，在作爲網格單元的「列」和作爲實際元素的「列」之間存在不確定性。下面我稱之爲「塊」。

您正在正確覆蓋連續第一個塊的排水槽。因此，排水溝的總數比連續的砌塊數少一個。

但是當你計算塊的寬度時，你從每一列中減去了陰溝，而沒有考慮到比塊更少的陰溝。

所以你應該按比例減少塊的寬度。

工作液：

// Accepts a number of columns that a block should span. 
// Returns a percentage width for that block. 
@mixin columns($columnSpan: 1) { 
    $number-of-blocks-in-container: $gridColumnCount/$columnSpan; 
    $total-width-of-all-gutters: gutterCalc(false) * ($number-of-blocks-in-container - 1); 
    $total-width-of-all-blocks:  1 - $total-width-of-all-gutters; 
    $width-of-a-single-block:  $total-width-of-all-blocks/$number-of-blocks-in-container; 

    width:       percentage($width-of-a-single-block); 
} 

現在你的車輪滾滾而來！看到它的行動：http://jsfiddle.net/fMeBk/46/請記住，瀏覽器收集的百分比值有一個小錯誤，所以網格定位可能不是像素完美的。順便說一句，右對齊一行中的最後一個塊是必要的，以儘量減少這個舍入誤差的視覺效果。

老兄，你的代碼架構錯了，你的方法有很多缺點。如果你願意，我可以給他們起名。

你真的應該給蘇西另一次嘗試。這是SASS的精彩片斷，也是學習SASS技術的絕佳來源。它的源代碼在GitHub上有很好的評論和可用。

據你介紹，你的網格框架有哪些功能是Susy缺乏的？

我向你保證，Susy 可以做你想做的。只要解釋一個任務，我就會試着想出一個利用Susy的優雅解決方案。

PS我並不是在試圖勸阻你不要試驗。實踐使完美！試驗是必要的，你做得很好。我想告訴你的是，你應該遵循一個很好的例子，並採取良好的做法，這樣你就不會在錯誤的地方結束。

PPS請給我回我的評價。我花了很多我的個人時間試圖幫助你，並且你縮小了我的答案。 。:(

Answer 2

您沒有說明任何具體問題，這是對StackOverflow的規則。

，沒有你們的框架結構的解釋相關，這是很難理解你想實現每個功能和混入什麼。

我們應該如何提供幫助？

不管怎樣，你的做法是錯誤的，原因有二：

1. 你試圖重新發明輪子。已經有幾十個網格框架。
2. 您正在使用非語義方法。您通過在HTML中應用特定於風格的類來進行樣式設計。相反，你的類應該是語義的（即聲明塊的功能，而不是它們的外觀），並且樣式應該應用於CSS中的那些類。有了SASS，這非常簡單。

解決方案：使用Susy。這是一款非常棒的軟件，其作者Eric Meyer在StackOverflow上的響應速度非常快。

到蘇珊，你的代碼看起來是這樣的：

HTML：

<div id="container"> 
     <div id="gallery"> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
     </div> 
     <div id="promos"> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
      <div></div> 
     </div> 
     <div id="footer"> 
      <div id="bottom-menu"></div> 
      <div id="partners"></div> 
      <div id="social-buttons"></div> 
     </div> 
     <div> 
      <div class="col span12"></div> 
     </div> 
</div> 

SASS：

////////// 
// Imports 
////////// 

@import susy 


////////// 
// Defining variables 
////////// 

// Main grid properties 
$total-columns : 12  // Number of columns 
$container-style: fluid // The grid should stretch 
$max-width  : 1200px // But not wider than this 

// Proportions between column width and gutter between columns 
$column-width : 85%  
$gutter-width : 100% - $column-width 

// Setting margins around the grid 
$grid-padding : 1em  // This will remain absolute 
$container-width: 100% // If you want relative margins, change this instead 


////////// 
// Applying containers and columns 
////////// 

// Setting containers in all immediate children of #container 
#container > * 
    +container /* ← Actual Susy magic! :D */ 
    max-width: $max-width 

// Setting columns 
#gallery > * 
    +span-columns(1) 
    &:last-child    // The last column should be marked with "omega" 
    +span-columns(1 omega) // to compensate browsers' calculation errors 

#promos > * 
    +span-columns(2) 
    &:last-child 
    +span-columns(2 omega) 

// #footer 
#bottom-menu 
    +span-columns(6) 

#partners 
    +span-columns(4) 

#social-buttons 
    +span-columns(2 omega) 

對不起，我沒有測試此代碼，它可能包含錯誤，但你仍然可以看到這個想法。

與Susy，您還可以輕鬆地創建響應網格。他們說Susy會成爲Compass的默認網格引擎。

UPD：看下這一項的具體問題回答！

Answer 3

我把一個簡單的基於SASS個網格生成一會兒回來，你正在尋找的數學是在這裏：

https://github.com/jordancooperman/simple_grid/blob/master/assets/css/scss/partials/_grid.scss

一些CSS中有顯示目的只是爲了讓你看到你的網格，如果使用的也是包含在項目中的標記，請告訴我，如果你有任何問題，歡呼！