9 Mixin Libraries For Sass Designers Devem Começar

Se você usa o Sass em seu fluxo de trabalho de desenvolvimento, sabe a importância dos mixins. Quando você vê algumas coisas que estão escritas repetidamente e tediosamente em CSS, é onde os mixins podem ajudá-lo a evitar o trabalho repetitivo. Um mixin contém declarações CSS que você pode reutilizar em todo o site.

Existem muitos mixins criados pelos desenvolvedores para ajudá-lo a trabalhar com o Sass no seu desenvolvimento. A maioria cobre coisas que geralmente são repetitivas em CSS. De adaptação em vários navegadores para criando botões, animações e efeitos de transição, encontre isto e muito mais nas seguintes 11 bibliotecas de mixin que você deve obter para o seu desenvolvimento Sass.

1. Bourbon

O Bourbon é uma biblioteca Sass que contém mixin, funções e complementos que permitem simplificar a criação de folhas de estilo para uso entre navegadores. Para mim, este é o mais maravilhoso Sass mixin. Ele contém quase tudo que você precisa para estilizar seu site, mantendo sua folha de estilo leve.

Confira a documentação completa para usar cada mixin e função disponíveis.

2. Sass CSS3 Mixins

Sass CSS3 Mixins fornecem mixins que funcionam em diferentes navegadores. Você encontrará um monte de mixins de melhores práticas aqui, como fundo, borda, caixa, coluna, fonte, transformação, transição e animação. É o suficiente para as suas necessidades de estilo. Para usar, importe css3-mixins.scss e chame o mixin na sua classe CSS.

Baixe este mixin aqui.

3. CssOwl

CssOwl fornece mixins úteis para definir a posição de um elemento (relativo ou absoluto) e adicionar conteúdo com o pseudo seletor ( :depois de e :antes). Também ajuda quando você quer criar elementos de sprite: o mixin dá flexibilidade para definir a posição da imagem em seu sprite. Além do Sass, a biblioteca mixin do CssOwl também está disponível para o LESS e o Stylus.

4. ponto de ruptura Sass

O ponto de interrupção ajuda você a fazer consultas de mídia por meio do Sass de uma maneira simples. Com o Breakpoint, você pode criar variáveis e atribuir um valor que defina min-width ou largura máxima de consultas de mídia. Como a variável que você criou tem um nome significativo, você pode chamar facilmente para usar no Sass.

5. Scut

O Scut contém um conjunto de mixins, espaços reservados, funções e variáveis reutilizáveis do Sass que o ajudam a implementar facilmente padrões comuns de código de estilo. Ele fornece código de práticas recomendadas para criar materiais da Web, como layouts de página e tipografia de estilo. Você pode reduzir a repetição ao escrever código reutilizando o código com mais frequência. Assim, ajudando você a se organizar mais no processo.

6. açafrão

Com Saffron, você pode adicionar animações e transições CSS3 com facilidade. Há uma dúzia de animações e transições disponíveis, incluindo o aparecimento / desaparecimento gradual, a entrada / a saída de slides, a subida e descida, assim como efeitos variados como agitar, balançar, saltar e outros. Para usar o Saffron, inclua o mixin na declaração Sass e chame o nome do efeito dentro da sua classe CSS. Você pode obter Saffron instalando-o usando Bower ou Gem, ou apenas baixá-lo manualmente do Github.

7. Digite as configurações

TypeSettings é um tipo de kit de ferramentas para o Sass. Ele definirá o tamanho da fonte em escala modular usando manchetes baseados em em (em vez de rems ou pixels), rítmica vertical e taxa de resposta. Você pode instalar este também com o Bower, baixar o release ou clonar o repositório. Para mais detalhes, confira sua página.

8. Sass Line

Sass Line é um Sass mixin que te ajuda a fazer tipografia melhor. Ele usa a unidade rems na sua fonte para que você possa trabalhar proporcionalmente a partir da grade da linha de base. A Sass Line usa um ritmo vertical preciso com base na grade da linha de base e permite que você defina uma escala modular para cada um dos seus pontos de interrupção para obter boas proporções em todos os aspectos do seu site.

Vá aqui para obter mais detalhes sobre como usá-lo.

9. Andy.scss

Andy.scss é uma coleção de mixins Sass úteis, criados para ajudá-lo a desenvolver a aparência de um site com facilidade, mantendo-o leve. Existem dezenas de mixins Sass disponíveis, desde fundos até animações. Quase todas as propriedades CSS usadas comumente são abordadas aqui. Obtê-lo no Github.

Mais Posts no Sass:

Começando com o Sass
Cavando no Sass
Como Compilar Sass Com Texto Sublime
Usando o Bootstrap 3 com Sass
Como construir um VCard online com Sass & Compass
Preprocessadores CSS Comparados: Sass vs. MENOS
Folhas de estilo sintaticamente impressionantes: usando bússola no Sass
Como converter CSS para Sass e SCSS