중첩 된 격자 컨텍스트에 관계없이 여러 열을 스팬하는 방법은 무엇입니까?

Question

유체 Susy 레이아웃의 여러 위치에서 사용되는 요소의 너비를 설정해야합니다. 부모 요소가 항상 같은 너비는 아니지만이 요소가 항상 페이지 너비와 관련하여 동일한 너비를 갖기를 원합니다.

예 : 12 열 눈금의 뉴스 기사는 때로는 12 개의 열을 포함하는 경우가 있습니다. 편집자는 뉴스 기사 텍스트에 <blockquote>을 추가 할 수 있습니다. 난 문맥 (12 또는 6 열)에 관계없이 blockquote가 항상 3 열 (전체 페이지에 비례)이되도록하고 싶다.

물론 이것이 고정 열 너비의 격자 인 경우 더 쉬울 것이지만 유동적 인 백분율 기반 솔루션을 찾고 있습니다.

추신. 문제 해결을 쉽게한다면 Susy 2 alpha를 기꺼이 사용할 것입니다. 이 문제는 정말 Susy에 대한 구체적인 아무 관련이없는 2 :

항상 더 재미가 비록

Answer 1

당신은, Susy 1 또는 2에서이 같은 방식으로 할 것, 그것은 문제가 될 것입니다 어떤 유체 CSS 상황. 자신이 어떤 컨텍스트인지 알기위한 갈고리가있는 경우에만 문제를 해결할 수 있습니다. 그 시점에서 양쪽 끝에서 해결할 수 있습니다. 다음과 같은 내용이 있습니다.

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

실제로 후크가 없으면 아무 것도 할 수 없습니다. CSS에는 element-queries이 없습니다 (해당 기사에서 제공된 이유 때문에 곧 제공 될 가능성은 거의 없습니다).