Как управлять положением gutters в Susy

При изучении Susy одним из вопросов, который всегда стоял передо мной, заключался в следующем: “Как удалить

1

padding

или

1

margin

у первого и последнего столбца

1

column

в разметке Susy без применения CSS-свойств

1	first-child

и

1	last-child?

”.

Этот вопрос является один из самых главных для всех, кто только начинает изучение Susy. Если посмотреть в корень данного вопроса, то его основную суть можно свести к следующему (если судить по многочисленным постам в Интернет): необходимо использовать значение

1

inside

вместо значения

1

after

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

1

gutter

в целом оказывает влияние на всю разметку, созданную в Susy.

Как мне кажется, вопрос о расположении отступов

1

gutter

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

Что такое - расположение отступов gutter

Расположение отступа

1

gutter

позволяет полностью менять всю разметку страницы, созданную в Susy. Данный параметр определяет, где должны находиться отступы

1

gutter

относительно столбцов

1

columns

. Также данная настройка определяет, будут ли отступы

1

gutter

являться CSS-свойством

1

padding

или

1

margin

.

Эта параметр находиться среди глобальных настроек переменной

1

$susy

. Как вариант, данный параметр можно использовать локально, внутри миксина

1

span

. Давайте начнем с рассмотрения случая, когда расположение отступа

1

gutter

управляется из глобальной переменной

1

$susy

.

По умолчанию, расположение отступов в Susy определено ключевым словом

1

after

. Помимо этого, существуют еще варианты:

1

before

,

1

split

,

1

inside

и

1	inside-static

. Ниже представлен полный вариант синтаксиса параметра

1	gutter-position

в глобальной переменной

1

$susy

:

$susy: (
  gutter-position: after ( before | after | split | inside | inside-static )
);

Ключевые слова в круглых скобках являются возможными вариантами значения параметра

1	gutter-position

.

Для ясности понимания тонкостей разметки в Susy при использовании параметра

1	gutter-position

необходимо создать простую структуру:

Gutter-position: after

Значением по умолчанию для параметра

1	gutter-position

является ключевое слово

1

after

. Данное значение заставляет Susy располагать отступы gutters после каждого столбца разметки. В этом режиме необходимо удалить отступ у последнего столбца в разметке. В этом случае отступы gutters являются CSS-свойством margin и размещаются в разметке следующим образом:

При использовании значения по умолчанию для параметра

1	gutter-position

миксин

1

span

создает три CSS-правила -

1

width

,

1	margin-right

и

1	float: left

:

.test {
  @include span(3 of 4);
}

Результирующий CSS-код:

.test {
  width: 73.68421%;
  float: left;
  margin-right: 5.26316%;
}

В этом коде свойство

1	margin-right

- это отступ

1

gutter

, созданный Susy в данной разметке.

Можно использовать ключевое слово

1

last

для удаления крайнего

1

margin

у столбца:

.last {
  @include span(1 of 4 last);
}

В результате получим результат в виде

1	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);
}

Краткое заключение: значение

1

after

параметра

1	gutter-position

является наиболее интуитивно понятным случаем создания разметки в Susy. При использовании значения по умолчанию единственный момент, о котором следует помнить - это убрать отступ у последнего столбца разметки с помощью ключевого слова

1

last

.

Gutter-position: before

Значение

1

before

является одним из вариантов предыдущего значения -

1

after

. Суть этого значения также простая. Вместо размещения отступов gutter после столбцов (как в случае с

1

after

), при значении

1

before

отступы gutters размещаются перед столбцами. В этом случае необходимо удалить отступ у первого столбца в разметке. Отступы gutter также являются в данном случае CSS-свойством

1

margin

:

При использовании значения

1

before

для параметра

1	gutter-position

миксин

1

span

генерирует три CSS-правила:

1

width

,

1	margin-left

и

1	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 */
}

Так как значение

1

before

является прямой противоположностью значения

1

after

, то его очень легко понять, если до этого вы хорошо разобрались с

1

after

. Вместо использования ключевого слова

1

last

для удаления отступа у последнего столбца разметки, в данном случае нужно использовать ключевое слово

1

first

для удаления отступа у первого столбца разметки:

.content {
  @include span(3 of 4 first);
}

.sidebar {
  @include span(1 of 4);
}

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

Краткое заключение: при использовании значения

1

before

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

1

first

для первого столбца разметки.

Gutter-position: split

Значение

1

split

параметра

1	gutter-position

кардинально отличается от двух предыдущих значений

1

before

и

1

after

. Если установлено значение

1

split

, то ширина отступа

1

gutter

делиться пополам (надвое) и обе половинки отступа располагаются по обеим сторонам одного столбца. В этом режиме отступы

1

gutters

генерируются в CSS-коде в виде CSS-свойства

1

margin

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

Если, как в нашем случае, имеются только два блока (с классом

1

.content

и

1

.sidebar

), то создание такой разметки выполняется просто. Для этого достаточно воспользоваться функцией

1

span

, как обычно:

.content {
  @include span(3 of 4);
}
.sidebar {
  @include span(1 of 4);
}

Однако, ситуация становиться не такой ясной, если блок

1

.content

или блок

1

.sidebar

будут содержать внутри себя блоки-потомки.

Давайте добавим два блока

1

div

с классом

1	.child-one

и классом

1	.child-two

внутрь блока

1

.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>

Для обоих вновь созданных блока применим тот же подход, что и ранее. Блок с классом

1	.child-one

будет иметь ширину 2-х столбцов из 3-х; блок с классом

1	.child-two

будет иметь ширину 1-го столбца из 3-х.

.content {
  @include span(3 of 4);
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Обратите внимание на тот факт, что границы обоих блоков

1	.child-one

и

1	.child-two

не совпадают с границами фоновой сетки!

Это происходит потому, что при задании для параметра

1	gutter-position

значения

1

split

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

1

.content

, а блоками-потомками являются

1	.child-one

и

1	.child-two

.

Для создания правильной разметки в данном случае необходимо добавить для блока-родителя ключевое слово

1

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

1

и

.child-two` вписались в границы сетки, “нарисованной” фоновым изображением!

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

Если “копнуть” поглубже и проанализировать сгенерированный CSS-код, то можно заметить, что для блоков

1	.child-one

и

1	.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%;
}

Блок-родитель имеет плавание влево

1	float: left

и ширину, которая указана в процентах; при этом ширина отступов

1

gutters

этого блока не учитывается (75% равно 3/4).

Блоки-потомки имеют все те же свойства, что и блок-родитель. Но при этом отступы gutters имеют место быть для этих блоков.

Краткое заключение: значение

1

split

кардинально отличается от двух рассмотренных ранее значений

1

before

и

1

after

. При использовании значения

1

split

необходимо добавлять ключевое слово

1

nest

к блоку-родителю и использовать миксин

1

span

для всех блоков-потомков.

Gutter-position: inside/inside-static

Оба значения

1

inside

и

1	inside-static

очень похожи на предыдущее значение

1

split

. Отступы gutters также делятся пополам (надвое) и обе половинки располагаются по обеим сторонам каждого столбца. Однако, в этом случае в CSS-выводе отступы являются свойством

1

padding

, а не

1

margin

. Также в этом случае нет необходимости удалять отступы у крайних столбцов в разметке:

Отступы

1

gutters

в случае

1	gutter-position: inside

имеют тот же принцип, что и при значении

1

split

. Если для блока-родителя не будет указано ключевое слово

1

nest

, то блоки-потомки выйдут за границы разметки.

.content {
  @include span(3 of 4);
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Если просто добавить ключевое слово

1

nest

для блока-родителя

1

.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);
}

Значение

1	inside-static

работает точно также, как и значение

1

inside

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

1

$susy

необходимо задать параметр

1	column-width

с указанием ширины столбца

1

column

.

Краткое заключение: значение

1

inside

работает точно также, как и значение

1

split

. При использовании значения

1

inside

необходимо добавлять ключевое слово

1

nest

к блоку-родителю и использовать миксин

1

span

для всех блоков-потомков.

Значение

1

inside

и

1

split

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

1

$susy

для параметра

1	gutter-position

.

Заключение

Различные типы разметки в Susy создаются с помощью выбора расположения отступов

1

gutters

. Различное местоположение отступов

1

gutters

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

Существует два основных способа создания разметки при содействии отступов

1

gutters

:

• значения

  1

  before

  и

  1

  after

  имеют создают отступы

  1

  gutters

  с одной стороны каждого столбца

  1

  column

  ; для крайнего столбца необходимо удалить отступ

  1

  gutter

  с помощью ключевого слова

  1

  first

  или

  1

  last

  .

• значения

  1

  inside

  ,

  1	inside-static

  ,

  1

  split

  разделяют каждый отступ

  1

  gutter

  на две равные половины, которые располагаются по обе стороны каждого столбца

  1

  column

  . Такие отступы не нуждаются в удалении.

Эта статья является небольшой выдержкой из книги Learning Susy, а точнее - из главы 8, посвященной позиционированию отступов

1

gutter

в разметке Susy. В книге вопрос позиционирования рассмотрен подробнее на основе более сложного примера. Если материал, поданный в статье, вам понравился, то книга понравиться еще больше.

Примечание переводчика: данный пост является переводом статьи Understanding Gutter Positions in Susy, созданным мною с любезного разрешения ее автора Zell Liew.

---