Как охватить несколько столбцов независимо от контекста вложенной сетки?

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

Пример. В сетке из 12 столбцов новостная статья иногда занимает 12 столбцов, иногда 6. Редакторы могут добавлять <blockquote> в текст новостной статьи. Я хочу, чтобы цитата всегда имела ширину 3 столбца (относительно всей страницы), независимо от ее контекста (12 или 6 столбцов).

Конечно, если бы это была сетка с фиксированной шириной столбцов, было бы проще, но я ищу гибкое решение на основе процентов.

PS. Я готов использовать Susy 2 alpha, если это облегчит решение проблемы.


susy-compass
person marcvangend    schedule 06.10.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы бы сделали то же самое в Susy 1 или 2, хотя во 2 всегда веселее. :)

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

blockquote {
  @include span-columns(3);
  .narrow & { @include span-columns(3,6); }
}

Без крюка на самом деле никак. В CSS нет элементных запросов (и вряд ли появится в ближайшее время по указанным причинам в той статье).

person Miriam Suzanne    schedule 06.10.2013