Introdução ao SASS: Quando usar @mixins ou %placeholders

O SASS é uma linguagem que extende o CSS que facilita o dia-a-dia do programador web e é essencial hoje em dia no desenvolvimento front-end .

Ele possuí duas funcionalidades muito legais que evitam que não repitamos o código, elas são o @mixin e %placeholders.

Ambas são muito úteis quando você tem uma série de regras css que se repetem em diversos seletores, porém os meandros das duas são bem diferentes.

Placeholders

Quando eu penso em placeholders a melhor analogia que me vem a mente são macros. (lembra das aulas de C?)

Placeholders são omitidos no CSS compilado, porém podem ser estendidos, isso é muito legal por que permite que você diminua o volume de código do seu scss criando regras reutilizáveis sem que você tenha que colocar mais uma classe no seu markup.

Ou seja, dá para você fazer algo do tipo:

%center {
  display:block;
  margin-left: auto;
  margin-right: auto;
}

E aplicar seu placeholder assim:

.classe {
  @extend %center;
}

No seu dia-a-dia você vai acabar utilizando placeholders na maioria das vezes quando você estiver trabalhando numa biblioteca.

A limitação dos placeholders é que eles não permitem a utilização de variáveis.

@mixins

Mixins também permitem que você reutilize o código sem ter que adicionar classes no seu HTML, quando eu penso nos @mixins, a melhor analogia que me vem a mente são os traits do PHP e de outras linguagens com orientação a objetos.

A principal vantagem de utilizar @mixin é que eles podem receber variáveis.

Ou seja, você pode fazer algo do tipo:

@mixin mixins-sao-demais($radius: 20px) {
  border-radius: $radius;
}

E chamar esse @mixin com esse código:

/* Utilizando o valor padrão para o argumento. */
.classe1 {
  @include mixins-sao-demais;
}

/* Passando um valor próprio como argumento. */
.classe2 {
  @include mixin-sao-demais(10px);
}

Isso te dá muita flexibilidade no dia-a-dia, tanto que é quase impossível você ter um projeto que não utilize alguns mixins.

Mas, Fabiano, qual a diferença entre um @mixin e uma função (@function)?

Antes do SASS ter suporte a funções, era muito comum os desenvolvedores utilizarem @mixin como se fosse uma função, porém eles tem objetivos diferentes. Enquanto mixins podem ter propriedades, funções servem para fazer calculos e retornar um valor.

PS: Muito obrigado ao Moises pelas dicas e inspiração para escrever esse post.

Estágio Desenvolvimento 2019

Esta é uma vaga para quem adora programar, quer se tornar um(a) ótimo(a) desenvolvedor(a) e procura um lugar que lhe proporcione desafios, aprendizado e um programa de estágio estruturado para seu crescimento.

Os estagiários na Chuva trabalham junto com membros mais experientes da equipe em projetos e produtos utilizados por milhares de usuários. Você trabalhará com uma equipe exigente com a qualidade do código e do produto entregue – e a todo momento você contará com o apoio de toda a equipe para atingir a excelência do seu código.

O programa de estágios da área de desenvolvimento na Chuva é organizado de forma estruturada para apoiar seu crescimento. Além das tarefas normais do estágio, você também vai trabalhar com projetos de iniciação, similares a projetos de iniciação científica, para desenvolver produtos e se desenvolver junto.

Continue lendo “Estágio Desenvolvimento 2019”

Git: Comandos úteis no dia a dia

Aqui na Chuva utilizamos git em todos os projetos, sejam de clientes, ou projetos que contribuímos para a comunidade, logo é sempre útil ter a mão uma lista de comandos básicos de git.

O que é git?

Git é um sistema controle de versão de código desenvolvido pelo Linus Torvalds (o mesmo cara que criou o Linux) utilizado por diversos projetos de Software livre, se você trabalha com web, com certeza já ouviu falar do Github, que nada mais é do que uma versão “hosted” de repositórios git.

Continue lendo “Git: Comandos úteis no dia a dia”