Переключение ширины поля в разных точках останова с помощью Susy Next

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

Теперь у меня есть требование изменить ширину желоба сетки в заданной точке останова. Принимая во внимание, что с традиционной системой сетки, подобной той, что используется в Foundation, все, что мне нужно, это такой медиа-запрос (при условии, что я использовал классы для элементов):

@include breakpoint($medium-up) {
   .column, .columns
   {
      padding: 6rem;
   }
}

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

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

Из документации Susy кажется, что ответ состоит в том, чтобы добавить что-то вроде:

.example {
    @include span(6);

    @include susy-breakpoint($medium-up, $medium-up-layout) {
       @include span(6);
    }
}

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

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

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

Чтобы было ясно, я никоим образом не критикую ни один из наборов инструментов. Просто ищем лучший способ их использовать.


sass grid-system susy-compass susy-sass susy-next
person Undistraction    schedule 25.07.2014    source источник
comment
У меня точно такая же проблема, я думаю, как бы я подошел к вещам! Не хочу повторять так много вещей   -  person Damon    schedule 26.01.2015

Ответы (1)


arrow_upward
2
arrow_downward

Susy никогда не предназначалась для того, чтобы диктовать вам, как вы работаете, поэтому, если вам не нравится подход Susy к желобам, установите для параметра gutters значение null и обрабатывайте их точно так же, как в Foundation. Susy не может встроить это, потому что мы строго следим за тем, чтобы не вносить разметку, но вы можете легко создавать сетки в стиле фундамента, используя Susy для обработки математики. Если это то, что вам нравится, вперед!

.column, .columns {
  padding: 3rem;

  @include breakpoint($medium-up) {
    padding: 6rem;
  }
}

Это просто означает, что вам придется использовать класс column во всей разметке. Это компромисс.

Вы также можете упростить работу с Susy. Если желоба — это единственное, что вам нужно изменить, вы можете сократить объем вывода:

.example {
  @include span(6);

  @include susy-breakpoint($medium-up, $medium-up-layout) {
    @include gutters();
  }
}

И если вы хотите сократить свой ввод, вы можете обернуть его в миксин:

@mixin gutter-change() {
  @include susy-breakpoint($medium-up, $medium-up-layout) {
    @include gutters();
  }
}

.example {
  @include span(6);
  @include gutter-change;
}

Из исследования, которое я видел, повторяющиеся медиа-запросы в выходных данных не увеличивают соответствующее время загрузки CSS, пока вы доставляете ресурсы, сжатые gzip.

person Miriam Suzanne    schedule 25.07.2014
comment
Пожалуйста, не поймите меня неправильно. Мне нравится подход Сьюзи. Просто трудно найти правильный способ его использования. Я думаю, что большая часть проблемы (в моем понимании и, насколько я вижу, в понимании других) заключается в попытке отделить идею о том, что Susy (и Sass) динамичны в той мере, в какой они способны распространять реакции. к точкам останова в ранее объявленных селекторах. В объектно-ориентированном языке имело бы смысл, чтобы триггер мог изменять состояние в течение всей программы, тогда как в Sass это не так. Спасибо за ответ. Здесь уже поздно, и я обработаю это утром. - person Undistraction; 26.07.2014
comment
Спасибо. Это имеет смысл. Я не хочу копировать Foundation, просто чтобы понять, как сделать то же самое с помощью Susy. Я предполагаю, что шаблон во всем этом заключается в том, чтобы упаковать функциональность точек останова в миксины и принять удар по повторяющемуся выводу медиа-запроса. Таким образом, эффективно запрашивайте у точки останова отступы, и она возвращает набор запросов, манипулирующих отступами через точки останова. - person Undistraction; 26.07.2014
comment
Что ж, воспроизведение Foudantion с помощью Susy является частью того, как Susy должна работать. Вся цель Susy (в отличие от Foundation и других) состоит в том, чтобы вы могли разобрать ее и делать что-то по-своему, а не пытаться вписаться в мой способ работы. То, что вы заметили в Sass, связано с тем, что это препроцессор для CSS, поэтому у него нет доступа к DOM. Из-за того, что CSS каскадируется с DOM, Sass не может надёжно творить ту магию, которую вы ожидаете от объектно-ориентированных языков программирования. - person Miriam Suzanne; 27.07.2014
comment
Я думаю, что моя проблема в том, что я так привык к функциональным и объектно-ориентированным языкам, что мне трудно избавиться от мышления, даже если оно в виде мелочных предположений на заднем плане. - person Undistraction; 27.07.2014