Как добавить левый и правый отступы к контейнерам в Susy 2.0

Я использую Susy 2.0. Я создаю сайт с фиксированной шириной (который станет адаптивным на более позднем этапе). Тем не менее, я думаю, что мой вопрос актуален при использовании Susy в качестве статического или плавного.

Вот мои глобальные настройки:

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: static, 
 gutters: 1/3,
);

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

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

Как лучше всего это сделать? Если я просто применю padding-left и padding-right (в простом CSS) к моему элементу-контейнеру, это разорвет сетку. Контейнер больше не является достаточно широким, чтобы содержать вычисления ширины столбца Susy.

В моем CSS для «box-sizing» установлено значение «border-box». Если я переопределю это в своем элементе-контейнере с помощью 'content-box', сетка будет вести себя правильно. Я ожидал обратного на самом деле?

Является ли решение применить «box-sizing: content-box» к элементам моего контейнера? Или в Susy есть настройка, которую я могу применить, которую мне не хватает? Я чувствую, что, вероятно, есть. Я бы предпочел, чтобы Сюзи справилась со всеми расчетами сетки, если это возможно.

Мой вопрос также относится к адаптивному / гибкому дизайну, поскольку у меня все еще есть та же проблема, даже если я задаю контейнеру определенную ширину и удаляю настройки «ширина столбца» и «математика».


susy-compass susy-sass
person Dave Foy    schedule 13.03.2014    source источник

Ответы (4)


arrow_upward
10
arrow_downward

На данный момент лучше всего установить content-box в контейнере и добавить собственный отступ. В то время как border-box более разумен для большинства вещей, бывают случаи, когда content-box имеет смысл, и, на мой взгляд, это отличный пример. Это работает, потому что Susy устанавливает ширину вашего контейнера, а ваш отступ добавляет к ней, а не вычитает, что означает, что у вас все еще есть место, необходимое для сетки.

Я бы хотел еще раз рассмотреть какую-нибудь функцию grid-padding, но в Susy 1 казалось, что она создает больше проблем, чем решает. Я должен подумать о лучших способах, которыми мы могли бы это сделать. Если есть идеи, мне всегда интересно!

person Miriam Suzanne    schedule 13.03.2014
comment
Спасибо, Эрик. На самом деле я собирался добавить комментарий, прежде чем увидел ваш ответ: «или, другими словами, что такое эквивалент $grid-padding в Susy 2.0?» - person Dave Foy; 14.03.2014
comment
Фон отладки сетки отображается во всю ширину, и весь макет кажется вне сетки. - person henrijs; 19.11.2014
comment
Фон отладки должен быть умным в отношении заполнения (с использованием background-origin и background-clip), но наложение отладки не так умно. - person Miriam Suzanne; 25.11.2014
comment
У меня похожая проблема. Я использую несколько контейнеров на странице, и добавление заполнения вручную к каждому из них кажется не СУХИМ. Есть ли способ указать это на глобальном уровне? Или мне лучше создать оболочку для миксина container()? - person Slava Fomin II; 16.06.2015
comment
В Susy он не встроен. Вы можете создать общий класс, просто поделиться переменной или обернуть миксин container. - person Miriam Suzanne; 17.06.2015
comment
@EricMSuzanne Может ли Susy каким-либо образом поддерживать использование функции CSS calc(...) в качестве параметра ширины контейнера? Тогда мы могли бы просто использовать, например. calc(100% - 20px) и установите margin: 0 auto в центр, чтобы у нас было 10 пикселей с каждой стороны (см. также мой ответ). - person herman; 28.08.2015
comment
Я не знаю, как в Sass даже распознать такую ​​функцию CSS, как calc, но 100% - 20px на самом деле не решает проблему, описанную выше, которая связана с сетками фиксированной ширины и отступами. Более того: Susy создана для того, чтобы ее можно было разобрать. Если миксин container не делает того, что вам нужно, вы должны прекратить использовать этот миксин. Он не делает ничего волшебного: только ширина, четкая фиксация и центрирование. Вместо этого вы можете сделать width: container() + 20px; и самостоятельно установить четкую фиксацию/центрирование. Если вы используете разные единицы измерения ширины столбца и заполнения, то calc() может помочь в этом. - person Miriam Suzanne; 29.08.2015
comment
Но я не вижу, чем это лучше, чем изменение box-sizing. Это именно тот вариант использования, для которого предназначен content-box. Нет причин не использовать его. - person Miriam Suzanne; 29.08.2015

arrow_upward
2
arrow_downward

Для отступов сетки я обычно делаю что-то подобное. Работает отлично и нет необходимости в дальнейшем усложнении :)

.container {
  @include container($susy); 
  padding-left: 15px; 
  padding-right: 15px; 
}
person Zell Liew    schedule 22.07.2014
comment
да, но когда вы это делаете, сетка (при отображении в качестве помощника фона) исчезает при изменении размера, а затем после нажатия f5 снова становится на место. однако это обычно не происходит в susy - person branquito; 13.07.2015

arrow_upward
0
arrow_downward

Как правило, вам нужно добавить ключевое слово «статический» в контейнер, который дает вам статический сайт, но вам нужно включить «математику: жидкость» в настройки, чтобы получить сайт на основе процентов. В противном случае, как вы упомянули в своем вопросе, «контейнер уже недостаточно широк, чтобы содержать расчеты ширины столбца Susy».

Настройки Susy

Вы все еще можете иметь сайт на основе рамки. Добавьте в настройки global-box-sizing: border-box. Вам также нужно изменить «math: static» на «math: Fluid», чтобы все ваши единицы измерения были в процентах.

Включить рамку

Добавьте "@include border-box-sizing;" вне настроек @suzy. Возможно, вам придется включить компас с помощью "@import "compass";"

Контейнер

Вам нужно включить «static» в качестве параметра. Контейнер принимает параметр макета (http://susydocs.oddbird.net/en/latest/toolkit/#container). Переменная layout состоит из ключевых слов (http://susydocs.oddbird.net/en/latest/shorthand/#shorthand-layout). «Ключевые слова» включают «статические» (http://susydocs.oddbird.net/en/latest/shorthand/#term-keywords).

Полный пример

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: fluid,
 global-box-sizing: border-box,
 gutters: 1/3
);

@include border-box-sizing;

.container {
     @include container(static);
     padding: 1%;
}

Отступы теперь можно добавить к контейнеру или любому другому элементу, не нарушая работу сайта.

person Erik Markhauser    schedule 21.05.2015
comment
Извините, но этот ответ неверен. Если вы используете плавную математику, чтобы преобразовать значения Susy в проценты, а затем используете рамку, проценты в сетке будут основаны на предположении, что контейнер не содержит никаких отступов, и, таким образом, все значения внутри будут слегка отличаться. content-box в контейнере необходим для сохранения правильных размеров. - person ividyon; 23.02.2017

arrow_upward
0
arrow_downward

Если вы согласны с добавлением некоторого поля в том же режиме (относительном или фиксированном), что и ширина самого контейнера, вы можете просто уменьшить ширину своего контейнера и использовать margin: 0 auto, чтобы центрировать его в его родительском элементе.

Вот так, для 5% заполнения с каждой стороны:

.my-container {
    @include container(90%);
    margin: 0 auto;
}

Если бы Susy поддерживала функции CSS в качестве ширины контейнера, вы могли бы использовать фиксированное количество пикселей даже при относительной ширине контейнера, например, по 10 пикселей с каждой стороны:

.my-container {
    @include container(calc(100% - 20px));
    margin: 0 auto:
}

К сожалению, это не работает. Конечно, если вы можете добавить div-оболочку вокруг своего контейнера, вы можете установить там ширину и поля и использовать container(100%).

person herman    schedule 28.08.2015