Как лучше всего построить многоколоночную сетку с минимальной разметкой с помощью Singularity?

Допустим, у меня есть сетка статей (2 столбца) внутри другого столбца. Каков наилучший способ добиться этого без необходимости явно указывать единственное число, в какой колонке должна быть статья?

Это единственная возможность объявить это псевдо-классами?

article:nth-child(1n){
   @include grid-span(1,1);
}
article:nth-child(2n){
   @include grid-span(1,2);
}

Благодарю.

Источник

2 ответа

Решение

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

$grids: 12;
$gutters: 1/3;

.column {
  @include float-span(1);

  &:last-child {
    @include float-span(1, 'last'); }}

К сожалению, в Singularity есть ошибка, которая не позволяет использовать этот короткий метод, даже если это предложено в документации Singularity.

Я исправил ошибку и отправил запрос на удаление. Подождите, пока Скотт или Сэм, ака Snugug, примут его и выпустят обновленный гем (версии 1.0.7 или новее). Тогда беги gem update или же bundle update и вы можете использовать самое чистое решение.

Источник

Вы можете использовать стиль вывода с плавающей точкой, но вам все равно придется иметь дело с дополнительным заполнением в правой колонке.

http://sassmeister.com/gist/5256403 - возможно, вам придется выбрать сингулярность в раскрывающемся меню, чтобы эта ссылка работала.

С плавающей точкой запись "последний" в столбце местоположения эквивалентна "омега" в Сьюзи. Работать с этим дополнительным заполнением все еще будет сложно, но по крайней мере ваши столбцы плавают рядом друг с другом без n-го.

Если вы все еще не удовлетворены, вы можете написать свой собственный стиль вывода. Не уверен, что CSS сделает свое дело, но, во всяком случае, генерируемая особенность CSS полностью настраивается. Мне еще предстоит полностью документировать, но вы можете добавить свои собственные стили вывода: https://github.com/Team-Sass/Singularity/tree/1.x.x/stylesheets/singularitygs/api

Источник
Другие вопросы по тегам