Automatizar Seletores de Filho-neto com Mixins Family.scss
Sass é a melhor maneira de gerenciar CSS moderno e bibliotecas de mixin pode economizar ainda mais tempo durante o ciclo de desenvolvimento.
Estes mixins funcionam como códigos automatizados ou funções que você chama nos seus arquivos principais do Sass. Alguns mixins são mais gerais, enquanto outros são muito específicos, como o Biblioteca Family.scss.
Esta biblioteca gratuita oferece 26 mixins para correr complexo : n-filho seletores sem memorizar todo esse código.
A maioria dos desenvolvedores sabe sobre o : n-filho seletor e, por padrão, certamente não é complicado. Você simplesmente passar um seletor numérico, por exemplo : n-filho (2) onde as regras de estilo pertencentes se aplicam a cada segundo filho do elemento pai.
No entanto, isso pode ser muito mais complexo quando você deseja selecionar elementos dinâmicos (como primeiro e último) ou quando você deseja selecionar pequeno punhado de elementos (como os três primeiros filhos).
É aqui que Family.scss pode ajudar. É uma biblioteca muito pequena e contém 26 soluções para seletores de crianças variando de básico a super complexo. Cada mixin tem uma demonstração na página inicial, que você pode procurar e filtrar conforme necessário.
Aqui estão alguns exemplos interessantes para mostrar o que esta biblioteca pode fazer:
depois de primeiro (5)- selecione todos os elementos depois dos 5 primeiros filhosde final (3)- selecione o terceiro ao último elemento filhotudo mas (3)- selecione todas as crianças, exceto a 3ªmesmo entre (3, 12)- selecione todas as crianças entre os elementos 3 e 12
Existem outras dezenas que você pode navegar e cada uma delas tem demonstrações para ajudá-lo a visualizar como elas funcionam.
Alguns mixins avançados contar com consultas quantitativas que escolher elementos que são “finalmente” ou “no máximo” fixo para um determinado intervalo. Por exemplo, você pode selecionar todos os filhos para elementos pais que tenham pelo menos 5 filhos (ou mais).
Essas idéias podem ser confusas ao ler sobre elas, mas o demonstrações ao vivo realmente tornar tudo cristalino.
Para cavar, você pode baixe uma cópia desta biblioteca mixin do repositório GitHub, junto com todas essas demos. E você pode compartilhar seus pensamentos ou perguntas com o criador do projeto no Twitter @LukyVJ.
