Susy - получить статическую ширину пролета в контейнере с жидкостью

Я создаю веб-сайт с использованием контейнера Susy Fluid Grid. Но некоторые из моих элементов интерфейса требуют фиксированной ширины. Итак, имея эти настройки:

$susy: (
  columns: 12,
  container: rem-calc(1680),
  gutters: 28px/112px,
  global-box-sizing: border-box,
  gutter-position: split
);

Я хотел бы легко получить, например, диапазон из 8 столбцов, но статически. Таким образом, @include span(8 из 12) приведет к значению precentage, что нормально, но в некоторых случаях я хотел бы получить статическое значение (конечно, на основе фиксированной максимальной ширины контейнера).

Является ли это возможным?


css sass grid susy
person Malyo    schedule 06.10.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В ваших глобальных настройках susy выше вы можете добавить:

math: static

Но для этого вам также необходимо включить объект ширины столбца.

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

$susy: (
  columns: 12,
  ...
  math: static,
  column-width: 40px
);

Когда вы делаете @include span вместо использования базы%, она будет использовать базу px, которая, как вы хотите, является статической.

person astrasleepz    schedule 07.10.2015
comment
Спасибо за попытку помочь, но вы неправильно поняли мой вопрос. Я хочу извлечь статическую ширину для определенных элементов, а не всего макета, который является гибким, и глобальная математика должна оставаться изменчивой. - person Malyo; 08.10.2015
comment
Если вы хотите, чтобы глобальная математика оставалась плавной, вы можете сделать это локально, используя шорткод: @include span (8 of 12 static 40px) Математика будет отображаться как статическая, а ширина столбца — 40 пикселей. - person astrasleepz; 09.10.2015

arrow_upward
0
arrow_downward

Да, вы можете передать static в качестве аргумента для любой функции или миксина Susy, где вы хотите получить статический вывод — @include span(8 of 12 static) — если у вас есть набор column-width или container. (не устанавливайте оба, иначе возможны конфликты)

обновление: о, я вижу, это было упомянуто в комментарии выше...

person Miriam Suzanne    schedule 14.10.2016