При изучении Susy одним из вопросов, который всегда стоял передо мной, заключался в следующем: “Как удалить
padding
илиmargin
у первого и последнего столбцаcolumn
в разметке Susy без применения CSS-свойствfirst-child
иlast-child?
”.
Этот вопрос является один из самых главных для всех, кто только начинает изучение Susy. Если посмотреть в корень данного вопроса, то его основную суть можно свести к следующему (если судить по многочисленным постам в Интернет): необходимо использовать значение inside
вместо значения after
. Для того, чтобы точно ответить на этот вопрос, необходимо хорошо понимать, каким образом положение отступов gutter
в целом оказывает влияние на всю разметку, созданную в Susy.
Как мне кажется, вопрос о расположении отступов gutter
в разметке Susy является самой важной настройкой, поскольку он оказывает влияние на весь код в целом. Если у вас перед прочтением статьи существовал такой вопрос, то данная статья именно для вас.
Что такое - расположение отступов gutter
Расположение отступа gutter
позволяет полностью менять всю разметку страницы, созданную в Susy. Данный параметр определяет, где должны находиться отступы gutter
относительно столбцов columns
. Также данная настройка определяет, будут ли отступы gutter
являться CSS-свойством padding
или margin
.
Эта параметр находиться среди глобальных настроек переменной $susy
. Как вариант, данный параметр можно использовать локально, внутри миксина span
. Давайте начнем с рассмотрения случая, когда расположение отступа gutter
управляется из глобальной переменной $susy
.
По умолчанию, расположение отступов в Susy определено ключевым словом after
. Помимо этого, существуют еще варианты: before
, split
, inside
и inside-static
. Ниже представлен полный вариант синтаксиса параметра gutter-position
в глобальной переменной $susy
:
$susy: (
gutter-position: after ( before | after | split | inside | inside-static )
);
Ключевые слова в круглых скобках являются возможными вариантами значения параметра gutter-position
.
Для ясности понимания тонкостей разметки в Susy при использовании параметра gutter-position
необходимо создать простую структуру:
Gutter-position: after
Значением по умолчанию для параметра gutter-position
является ключевое слово after
. Данное значение заставляет Susy располагать отступы gutters после каждого столбца разметки. В этом режиме необходимо удалить отступ у последнего столбца в разметке. В этом случае отступы gutters являются CSS-свойством margin и размещаются в разметке следующим образом:
При использовании значения по умолчанию для параметра gutter-position
миксин span
создает три CSS-правила - width
, margin-right
и float: left
:
.test {
@include span(3 of 4);
}
Результирующий CSS-код:
.test {
width: 73.68421%;
float: left;
margin-right: 5.26316%;
}
В этом коде свойство margin-right
- это отступ gutter
, созданный Susy в данной разметке.
Можно использовать ключевое слово last
для удаления крайнего margin
у столбца:
.last {
@include span(1 of 4 last);
}
В результате получим результат в виде margin-right: 0
:
.last {
width: 21.05263%;
float: right;
margin-right: 0;
}
В рассматриваемой нами разметке область контента занимает 3 столбца из 4. При этом область боковой панели размещается в одном столбце из 4-х. Кроме того, боковая панель является последним элементом разметки, поэтому код для подобного случая будет таким:
.content {
@include span(3 of 4);
}
.sidebar {
@include span(1 of 4 last);
}
Краткое заключение: значение
after
параметраgutter-position
является наиболее интуитивно понятным случаем создания разметки в Susy. При использовании значения по умолчанию единственный момент, о котором следует помнить - это убрать отступ у последнего столбца разметки с помощью ключевого словаlast
.
Gutter-position: before
Значение before
является одним из вариантов предыдущего значения - after
. Суть этого значения также простая. Вместо размещения отступов gutter после столбцов (как в случае с after
), при значении before
отступы gutters размещаются перед столбцами. В этом случае необходимо удалить отступ у первого столбца в разметке. Отступы gutter также являются в данном случае CSS-свойством margin
:
При использовании значения before
для параметра gutter-position
миксин span
генерирует три CSS-правила: width
, margin-left
и float: left
с помощью кода:
.test {
@include span(3 of 4);
}
Результирующий CSS-код будет выглядеть таким образом:
.test {
width: 73.68421%;
float: left;
margin-left: 5.26316%; /* Notice this is margin left, not right */
}
Так как значение before
является прямой противоположностью значения after
, то его очень легко понять, если до этого вы хорошо разобрались с after
. Вместо использования ключевого слова last
для удаления отступа у последнего столбца разметки, в данном случае нужно использовать ключевое слово first
для удаления отступа у первого столбца разметки:
.content {
@include span(3 of 4 first);
}
.sidebar {
@include span(1 of 4);
}
В результате получим точно такую же разметку, что и в предыдущем случае.
Краткое заключение: при использовании значения
before
разметка получается точно такой же, как и в предыдущем случае. Единственное отличие заключается в применении ключевого словаfirst
для первого столбца разметки.
Gutter-position: split
Значение split
параметра gutter-position
кардинально отличается от двух предыдущих значений before
и after
. Если установлено значение split
, то ширина отступа gutter
делиться пополам (надвое) и обе половинки отступа располагаются по обеим сторонам одного столбца. В этом режиме отступы gutters
генерируются в CSS-коде в виде CSS-свойства margin
. В этом случае нет необходимости удалять отступы для крайних столбцов разметки:
Если, как в нашем случае, имеются только два блока (с классом .content
и .sidebar
), то создание такой разметки выполняется просто. Для этого достаточно воспользоваться функцией span
, как обычно:
.content {
@include span(3 of 4);
}
.sidebar {
@include span(1 of 4);
}
Однако, ситуация становиться не такой ясной, если блок .content
или блок .sidebar
будут содержать внутри себя блоки-потомки.
Давайте добавим два блока div
с классом .child-one
и классом .child-two
внутрь блока .content
для того, чтобы проиллюстрировать эту ситуацию:
<div class="content">
<h2>
Content
</h2>
<div class="child-one">
<h2>
Child One
</h2>
</div>
<div class="child-two">
<h2>
Child Two
</h2>
</div>
</div>
Для обоих вновь созданных блока применим тот же подход, что и ранее. Блок с классом .child-one
будет иметь ширину 2-х столбцов из 3-х; блок с классом .child-two
будет иметь ширину 1-го столбца из 3-х.
.content {
@include span(3 of 4);
}
.child-one {
@include span(2 of 3);
}
.child-two {
@include span(1 of 3);
}
Обратите внимание на тот факт, что границы обоих блоков .child-one
и .child-two
не совпадают с границами фоновой сетки!
Это происходит потому, что при задании для параметра gutter-position
значения split
нужно учитывать взаимосвязь между блоками-родителями и блоками-потомками. В данном конкретном случае блоком-родителем является .content
, а блоками-потомками являются .child-one
и .child-two
.
Для создания правильной разметки в данном случае необходимо добавить для блока-родителя ключевое слово nest
для того, чтобы показать, что этот блок как раз и является блоком-родителем:
.content {
@include span(3 of 4 nest); // Добавлен ключ nest
}
.child-one {
@include span(2 of 3);
}
.child-two {
@include span(1 of 3);
}
Теперь посмотрите, как точно оба блока .child-oneи
.child-two` вписались в границы сетки, “нарисованной” фоновым изображением!
На первый взгляд, ситуация является немного запутанной. Для того, чтобы не путаться, нужно всегда помнить, что в случае необходимости вписать блоки-потомки точно в границы сетки, нужно использовать ключевое слово для их блока-родителя.
Если “копнуть” поглубже и проанализировать сгенерированный CSS-код, то можно заметить, что для блоков .child-one
и .child-two
он совершенно различный:
.content {
width: 75%;
float: left;
}
.child-one {
width: 60%;
float: left;
margin-left: 3.33333%;
margin-right: 3.33333%;
}
.child-two {
width: 26.66667%;
float: left;
margin-left: 3.33333%;
margin-right: 3.33333%;
}
Блок-родитель имеет плавание влево float: left
и ширину, которая указана в процентах; при этом ширина отступов gutters
этого блока не учитывается (75% равно 3/4).
Блоки-потомки имеют все те же свойства, что и блок-родитель. Но при этом отступы gutters имеют место быть для этих блоков.
Краткое заключение: значение
split
кардинально отличается от двух рассмотренных ранее значенийbefore
иafter
. При использовании значенияsplit
необходимо добавлять ключевое словоnest
к блоку-родителю и использовать миксинspan
для всех блоков-потомков.
Gutter-position: inside/inside-static
Оба значения inside
и inside-static
очень похожи на предыдущее значение split
. Отступы gutters также делятся пополам (надвое) и обе половинки располагаются по обеим сторонам каждого столбца. Однако, в этом случае в CSS-выводе отступы являются свойством padding
, а не margin
. Также в этом случае нет необходимости удалять отступы у крайних столбцов в разметке:
Отступы gutters
в случае gutter-position: inside
имеют тот же принцип, что и при значении split
. Если для блока-родителя не будет указано ключевое слово nest
, то блоки-потомки выйдут за границы разметки.
.content {
@include span(3 of 4);
}
.child-one {
@include span(2 of 3);
}
.child-two {
@include span(1 of 3);
}
Если просто добавить ключевое слово nest
для блока-родителя .content
, то в результате получим следующее:
.content {
@include span(3 of 4 nest); // The nest key is needed
}
.child-one {
@include span(2 of 3);
}
.child-two {
@include span(1 of 3);
}
Значение inside-static
работает точно также, как и значение inside
. Единственное исключение заключается в том, что отступы gutters получаются в фиксированных единицах измерения, а не в процентах. Кроме этого, в глобальной переменной $susy
необходимо задать параметр column-width
с указанием ширины столбца column
.
Краткое заключение: значение
inside
работает точно также, как и значениеsplit
. При использовании значенияinside
необходимо добавлять ключевое словоnest
к блоку-родителю и использовать миксинspan
для всех блоков-потомков.
Значение inside
и split
имеют одинаковый сгенерированный CSS-код, поэтому можно с легкостью менять между собой эти значения в глобальной переменной $susy
для параметра gutter-position
.
Заключение
Различные типы разметки в Susy создаются с помощью выбора расположения отступов gutters
. Различное местоположение отступов gutters
в каждом случае имеет свои тонкости и требует понимания процесса, если вы хотите эффективно их использовать.
Существует два основных способа создания разметки при содействии отступов gutters
:
-
значения
before
иafter
имеют создают отступыgutters
с одной стороны каждого столбцаcolumn
; для крайнего столбца необходимо удалить отступgutter
с помощью ключевого словаfirst
илиlast
. -
значения
inside
,inside-static
,split
разделяют каждый отступgutter
на две равные половины, которые располагаются по обе стороны каждого столбцаcolumn
. Такие отступы не нуждаются в удалении.
Эта статья является небольшой выдержкой из книги Learning Susy, а точнее - из главы 8, посвященной позиционированию отступов gutter
в разметке Susy. В книге вопрос позиционирования рассмотрен подробнее на основе более сложного примера. Если материал, поданный в статье, вам понравился, то книга понравиться еще больше.
Примечание переводчика: данный пост является переводом статьи Understanding Gutter Positions in Susy, созданным мною с любезного разрешения ее автора Zell Liew.
Комментарии