SASS Mixin для разметки сетки

Question

Допустим, что мы имеем следующую разметку:

<section class="wrapper"> 
    <div>column1</div> 
    <div>column2</div> 
    <div>column3</div> 
    <div>column4</div> 
</section> 

мне нужно подмешать, который будет устанавливать равной ширины столбцов и будет плавать их влево. Простая сетка из четырех столбцов. Вот что я придумал до сих пор.

@mixin grid($columns: 2, $tag: "div") { 
    #{$tag} { 
     width: 100%/$columns; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     float: left; 
    } 
    &:after { 
     display: table; 
     content: " "; 
     clear: both; 
     *zoom: 1; 
    } 
} 

Мой вопрос: есть ли лучший способ сделать это, и я что-то пропущу.

Answer 1

Возможно, вы захотите взглянуть на singularitygs!

С этим расширением SASS вы можете написать

div { 
    @include grid-span(1,1,4,$output-style: 'float'); 
} 

Параметры для grid-span являются (with, startpos, context, options). Все числа будут преобразованы в ширину на основе отношения. Приведенный выше пример может быть прочитана как:

width 1 at position 1 in a grid-context of 4 
=> width: 25%; margin-left: 0; 

(ouput-style: 'float' необходим, потому что вы ориентируетесь несколько дивы)

Или вы можете определить базовую сетку первой, и оставить из контекста:

$grids: 4; 

div { 
    @include grid-span(1,1,$output-style: 'float'); 
} 

Вы можете даже пойти дальше и использовать breakpoints иметь разные сетки для различных оконных размеров:

$grids: 4; // base grid (mobile first) 
$grids: add-grid(12 at 980px); // 12-grid for everything above 980px 
$output-style: 'float'; // set the output-style globally 
div { 
    @include grid-span(2,1); // => 50% 
    @include breakpoint(980px) { 
     @include grid-span(4,1); => 33.3333% 
    } 
} 

Существует больше возможностей с Singularity, поэтому ознакомьтесь с их wiki!