Удаление последнего желоба в строке с Singularitygs?

Question

Я пытался найти оптимальное решение для отображения списка проектов с использованием Singularity.

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

Я думаю, что решение будет иметь больше общего с css, чем сингулярность, но, может быть, есть хорошее решение в особенности, которую я не хватает?

Эти проекты в конечном итоге будут регулярно добавляться cms.

пример: http://sassmeister.com/gist/7916151

Answer 1

Хорошо, есть ряд вещей, которые вы должны учитывать.

Во-первых,, Singularity и Breakpoint пока не совместимы с Sass 3.3, тогда как Sassmeister.com уже использует Sass 3.3. Убедитесь, что вы используете Sass 3.2.x в своем проекте. Чтобы продемонстрировать Sass + HTML, рассмотрите возможность использования SassBin.com.

Во-вторых,, вы используете 12px желоба. Это неверно. Водосточные желоба указаны как единичные значения по отношению к одному столбцу. Поэтому, когда у вас есть два столбца и водосточные желоба 12px, вы на самом деле говорите Singularity, чтобы сделать водосточные желоба в 12 раз больше, чем столбцы.

Вместо этого предоставьте относительные желоба: $gutters: 0.1.

В-третьих,, вы указываете сетку с четырьмя столбцами для среднего размера, но используете их только в виде двухколоночной сетки. Если вы не используете четыре столбца где-то в своем проекте, я предлагаю вам опустить это определение из 4 столбцов и продолжать использовать сетку с двумя столбцами.

В-четвертых,, вы устанавливаете контур на своем контейнере, но он никогда не отображается должным образом, потому что контейнер имеет нулевую высоту. Он имеет нулевую высоту, потому что все его содержимое плавает.

Чтобы контейнер охватывал плавающий контент, вы должны применить clearfix к контейнеру. Google это. Самый простой способ применения clearfix - использовать микшер pie-clearfix, который поставляется вместе с Compass. Но я предлагаю вам использовать удлинитель %clearfix-micro, который поставляется с Toolkit.

В-пятых (есть даже такое слово?), Чтобы удалить пробел справа, вы должны применить последнийfloat-span к последнему элементу в каждой строке. Чтобы сделать это правильно, вам нужно узнать, как работает nth-child. Я настоятельно рекомендую вам это сделать.

Короче говоря, nth-child принимает аргумент, который выглядит как An+B, где A и B - целые числа. A должно быть равно числу столбцов, а B - номер столбца, который вы адресуете. Когда вы обращаетесь к последнему столбцу, B в вашем случае равен A. Итак, все выглядит так: nth-child(3n+3).

В-шестых, вы применяете интервалы сингулярности для разных точек останова таким образом, чтобы они накапливались. Это нормально, когда вы переопределяете интервалы для всех своих элементов одновременно, чтобы все они переопределялись в каждом запросе на медиа.

Но когда вы применяете стили выборочно (до последнего элемента в каждой строке), вам также придется отменить их. Это очень безрадостная вещь.

Вместо этого вы должны сузить медиа-запросы, чтобы они обрабатывали только определенные фрагменты между двумя точками останова. В этом случае стили заполнения не будут накапливаться.

Вот как код будет выглядеть, если вы использовали все мои рекомендации: http://sassbin.com/gist/7951326/

седьмые (мой язык болеет), рассмотреть вопрос об использовании Breakpoint Slicer расширения, крошечная оберткой для Breakpoint, что делает нарезку точек останова диапазонов очень быстро и без усилий.

Вот как ваш код может выглядеть, если вы использовали при прерывании Slicer: http://sassbin.com/gist/7951724/

восьмых, если вы сделали хотите фиксированные желоба, то должно было установить опцию $gutter-styles: 'fixed'.

Answer 2

Конечно, вы могли бы сделать что-то вроде этого:

&:nth-child(3n) { 
    margin-right: 0; 
} 

На вики Singularity, это, кажется, указывает, что это должно работать:

&:nth-child(3n) { 
     @include float-span(2, 'last'); 

}

Но я не понял или не понял его функции.

Answer 3

Спасибо за обширный ответ.

Я хорошо знаю селектор nth-child. Я пошел по этой дороге, но решил, что это не чистое решение для меня.

Я знаю, что я не очистил поплавок ... на самом деле не был частью моего вопроса.

Установка фиксированной высоты 12px не неправильно на основе документации: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#fixed-gutters

мне нужен фиксированные желоба. В этом весь смысл проблемы.

я начал делать свой собственный фиксированный раствор Желоб жидкости колонки, что я, любя до сих пор: http://codepen.io/joshuarule/pen/zsfEo