Есть ли способ установить минимальную ширину элемента с помощью susy?

Question

Я знаю, что это, вероятно, невозможно, и я просмотрел документацию, и я не мог ее найти.

Вот мой сценарий:

Скажем, у меня есть сетка на 12 столбцов, основное содержание на левой стороне и вторичной по правой стороне.

Я следую мобильному-первому подходу, поэтому стилизация по умолчанию (мобильная) делает как левый, так и правый столбцы 100%. Основное содержание - первое и второе внизу.

Затем для планшета/рабочего стола я делаю основное содержимое 8 столбцов (выровнены влево) и вторичные 4 столбца (выровнены вправо). Однако мне нужно, чтобы во вторичном столбце контента всегда было не менее 300 пикселей (из-за объявления).

Есть ли способ, которым я могу это сделать с Сьюзи?

Answer 1

Несомненно. Самый простой способ - убедиться, что ваша точка останова не произойдет, пока не будет достаточно места для столбцов 4/12, чтобы быть больше 300 пикселей. В противном случае вам нужно проявить творческий подход.

Единственный возможный способ сделать это в CSS состоит в том, чтобы иметь контролируемый элемент (вторичный) в первую очередь в разметке. Из-за того, как обрабатывается поток документов, невозможно, чтобы более поздний элемент влиял на прежний - и вам нужны стили на secondary для управления перемещением main.

Первое, что нужно сделать, чтобы получить secondary, двигаясь так, как вы хотите. Вам также необходимо настроить переплет вручную здесь:

.secondary { 
    @include span-columns(4 omega); 
    min-width: 300px; 
    margin-left: gutter(); 
} 

Затем вам нужно дать main контекст компоновки, так что это не обернуть вокруг плавало secondary. Самый простой способ сделать это (с некоторыми побочными эффектами) - использовать overflow: hidden.

.main { 
    overflow: hidden; 
} 

Все. Если вы не можете использовать overflow: hidden, есть и другие подходы, которые могут сработать для вас. Для этой цели используется OOCSS lastUnit, но использует намного больше кода.

Или вы можете использовать flexbox вместо этого, но поддержка невелика.

В принципе: Сьюзи не проблема - есть способы сделать это, но это займет какую-то работу независимо от того, какую систему вы используете. Я по-прежнему рекомендую более высокую точку останова (или промежуточную).