Eu finalmente encontrei algum tempo para testar Singularity, e estou de volta a um problema que tive antes, para que eu não possa encontrar uma solução óbvia.

Meu problema é com grades aninhadas. Digamos que eu tenha uma grade simples de 12 colunas

$grids: add-grid(12 at $break2);

E meu layout usa uma área de conteúdo principal que se estende por 9 dessas 12 colunas:

@include breakpoint($break2) {
    @include grid-span(9, 3);
    border: 1px solid red;
}

O, dentro dessa área de conteúdo, eu preciso criar uma seção que é dividida em três colunas, o que significa que cada artigo dentro irá abranger 3 colunas do contêiner pai (que é 9 de 9 colunas).

Eu tentei isso com o seguinte código, mas não consigo fazê-lo funcionar.

.highlights{
    overflow: hidden;
    border: 1px solid black;

    article{

        @include float-span(3);

        &:nth-child(3n){
            @include float-span(1, 'last');
        }
    }
}

Meu objetivo era ter uma declaração simples, onde eu poderia ter uma declaração de artigo genérico para cada artigo, passando uma regra para o último artigo em cada linha como eu fiz acima.

Talvez a minha confusão seja porque estou tão acostumado com o atual sistema de grade que estou usando, você pode ajudar com isso. Qual é a melhor e mais prática maneira de aninhar grades para que eles possam se alinhar com seus elementos pai?