Sass calculcate columnwidth percent

Question

Я пытаюсь сделать свой собственный маленький columngrid с sass, но я не могу обернуть голову этой проблемой.

Это то, к чему я придумал, но это не правильное решение. Я получаю чистую сетку, как это, но проблема в том, что я удаляю дополнительный процент в каждой строке.

Я удаляю gutter_width 1% (в данном случае) по ширине каждого столбца и заменяя комнату, используя мою gutter_width в качестве поля слева. Поэтому для каждого столбца я удаляю процент и добавляю его как margin, создавая желоба. Проблема возникает, когда я удаляю край первого ребенка в строке, которая оставляет меня с 99% -ой строкой.

Может ли кто-нибудь помочь мне с этим? Или, может быть, предложите лучший способ.

$container_width: 970px; // Main container width 
$gutter_width: 1%; 
$columns: 12; // Twelve columns 


/* #Calculate the columnwidths */ 
/* Calculate the width of a single column and multiple it by columncount 
================================================== */ 

@for $i from 1 through $columns { 
    .column-#{$i} { 
     width: ((100%/$columns) * $i) - $gutter_width; 
    } 
} 

.container { 
    max-width: $container_width; 
    margin: 0 auto; 
} 

.row { 
    width: 100%; 
    margin: 1em 0; 
    @include pie-clearfix; 
} 

// Select all element that contains class 'column' 
[class*="column"] { 
    float: left; 
    margin-left: $gutter_width; 
    &:first-child { 
     margin-left: 0; 
    } 
} 

Answer 1

Должен быть один меньше желоба, чем есть столбцы - как в контексте, так и в ширине пролета. Правильная математика на самом деле:

// the width of a single column has to account for "$columns - 1" gutters. 
$column_width: (100% - $gutter_width * ($columns - 1))/$columns; 

@for $i from 1 through $columns { 
    .column-#{$i} { 
    the width of a span should cover "$i" columns, plus "$i - 1" gutters 
    width: $column-width * $i + $gutter_width * ($i -1); 
    } 
} 

Классы, как это создать довольно хрупкую систему, если вы хотите, чтобы гнездиться любые сетки пролетов внутри других грид-пролетов, но она должна охватывать основы. Когда вы используете предварительный процессор, такой как Sass, я рекомендую полностью оставить классы .column-x и просто использовать mixins.

Answer 2

Поскольку вы удалили $ gutter_width из первого ребенка, вам нужно добавить его снова к последнему. Один из способов это сделать может быть, чтобы поместить это в ваших петель:

&:last-of-type{ 
    width: (100%/$columns) * $i; 
} 

Таким образом, если столбец является последним элементом ширина пересчитывается с дополнительными 1%. Если вы хотите, чтобы более быстрая поддержка браузера просто заменила его на класс утилиты с именем .last-column или что-то в этом роде.