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

Question

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

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

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

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

Answer 1

Вы бы сделать это так же, как в Susy 1 или 2, хотя это всегда больше удовольствия в 2 :)

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

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

Действительно нет никакого способа сделать это без крючка. CSS не имеет element-queries (и вряд ли в ближайшее время по причинам, указанным в этой статье).