Статические сетки с помощью Susy 2

Reading time ~4 minutes

Иногда бываю ситуации, когда необходимо использовать сетки с фиксированной шириной, вместо обычного использования “резиновых” сеток.

Плагин Susy 2 предоставляет возможность для работы с такими сетками. Но первоначально, необходимо выполнить несколько базовых настроек плагина для того, чтобы начать работать с такими сетками:

Susy + Breakpoint

Эта статья является третьей частью из серии руководства по плагину Susy 2. Если вы впервые познакомились с плагином Susy 2, то рекомендую начать его изучение с первой статьи - “Краткое руководство по Susy 2”.

Настройка Susy 2 для работы с фиксированной шириной

Для того, чтобы начать работать с фиксированной шириной элементов в плагине Susy 2, необходимо изменить значение одного из его параметров c

1
math: fluid
на
1
math: static
. Также необходимо задать ширину колонки через параметр
1
column-width
, для этого подойдут единицы измерения
1
px
,
1
em
или
1
rem
. В примере этой статьи будут использоваться пиксели (
1
px
).

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

1
column
необходимо установить число колонок при самом маленьком размере окна браузера.

Для начала создадим новый проект через Compass, указав на необходимость использования плагина Susy в нем:

compass create -r susy -u susy susy_static

Затем откроем файл

1
_grids.scss
и добавим в него несколько следующих строк:

$susy: (
  math: static,
  columns: 4,
  column-width: 60px,
  gutters: 1/4,
  use-custom: (rem: true)
);

Создаем в Susy 2 статическую сетку

Шаги по созданию сетки с помощью плагина Susy 2 точно такие же, как если бы создавалась адаптивная сетка (по умолчанию). Первое, что необходимо сделать, это создать блок с классом

1
.container
. Однако, при этом не стоит забывать, что для статической сетки миксину
1
container
нужно передать аргумент в виде карты
1
map
через параметр
1
$susy
.

Когда плагин Susy 2 переключен в режим работы с фиксированной шириной сетки, ширина блока-обертки устанавливается в соотвествии с шириной колонки (

1
column-width
), число колонок (
1
columns
) и ширина gutter (
1
gutters
) также передаются в виде фиксированных величин. (Прим. переводчика: можно сказать немного по другому; все эти параметры с их значениями передаются миксину
1
container
через переменную
1
$susy
):

@import "grids";

.wrapper{
  @include container($susy);
}

Плагин Susy 2 автоматически высчитает максимальную ширину сетки. Скомпилированный CSS-вид будет выглядет следующим образом:

.wrapper {
  width: 285px;
  margin-left: auto;
  margin-right: auto;
}
.wrapper:after {
  content: " ";
  display: block;
  clear: both;
}

Единственное различие между статической и адаптивной сеткой заключается в том, в плагин Susy 2 расчитывает максимальную ширину блока-контейнера, в то время как в адаптивной сетке максимальная ширина всегда принимается равной 100%.

Преобразование статической сетки в адаптивную в Susy 2

Создание адаптивной сетки с помощью плагина Susy 2 в режиме статической сетки практически ничем не отличается от того, как это можно делать в адаптивном режиме. За исключением того, что вы уже догадались, это блок-обертка. В данной статье я затрону только изменение самого блока-контейнера. Если необходима более подробная информация об остальных моментах, вернитесь назад, к статье “Краткое введение в Susy 2 (Часть 2)”.

При создании адаптивной сетки ее ширина всегда равна 100%. Поэтому нет необходимости явно ее задавать. Но в данном случае мы все-таки это сделаем.

К счастью, проблем с этим в плагине Susy 2 нет. Ниже показан наилучший метод, который можно только представить.

.wrapper{
    @include breakpoint(600px){
    @include container(12)
  }
}

.wrapper{
    @include breakpoint(900px){
    @include container(16)
  }
}

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

Скомпилированный CSS-код будет таким:

@media (min-width: 900px) {

  .wrapper {
    width: 1185px;
    margin-left: auto;
    margin-right: auto;
  }

  .wrapper:after {
    content: " ";
    display: block;
    clear: both;
  }
}

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

1
margin-left
и
1
margin-right
, а также
1
clearfix
; это происходит потому, что блок-обертка был переопределен.

На этом серия статей по Susy 2 завершена.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024