Grid simples com SASS

Algumas vezes você vai preferir usar um sistema de grid feito por você e não algum framework do mercado como o Bootstrap ou o Foundation. Isso tem suas vantagens e desvantagens. Mas se você preferir um grid presonalizado, fazer isso com SASS é mole. Existe uma série de soluções em SASS aí fora. Algumas mais

Algumas vezes você vai preferir usar um sistema de grid feito por você e não algum framework do mercado como o Bootstrap ou o Foundation. Isso tem suas vantagens e desvantagens. Mas se você preferir um grid presonalizado, fazer isso com SASS é mole.

Existe uma série de soluções em SASS aí fora. Algumas mais completas que essa, mas essa acaba ganhando por ser muito simples, com menos recursos, mas muito funcional para projetos pequenos.

O HTML básico de exemplo será esse:

Primeiro, como qualquer sistema de grid em SASS, defina as variáveis que comandarão o gerenciamento do Grid.

Agora basta fazer um for simples no SASS. Esse for vai calcular a largura de todas as colunas, que no nosso exemplo tem apenas 12:

O output desse for é algo mais ou menos assim:

O resultado você pode ver abaixo:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *