SCSS é uma extensão de CSS que torna seu código mais fácil de gerenciar. Com SCSS, você pode usar mixins e funções para evitar escrever o mesmo código repetidamente. Neste artigo, mostrarei alguns mixins e funções SCSS úteis que podem economizar seu tempo e tornar seu código mais limpo.

Por que usar mixins e funções? Ao escrever CSS, você costuma repetir os mesmos estilos. Mixins e funções SCSS ajudam por:

• Evitando repetição: escreva estilos comuns uma vez e use-os em qualquer lugar.
• Adicionando flexibilidade: altere estilos facilmente com parâmetros.
• Escrevendo estilos dinâmicos: use cálculos para criar designs mais flexíveis.

1. Mixin de pontos de interrupção responsivos

Ao tornar sites responsivos, você precisa escrever muitas consultas de mídia. Este mixin facilita o tratamento de pontos de interrupção.

@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1200px) { @content; }
  }
}

// Usage
.container {
  padding: 20px;

  @include respond-to(mobile) {
    padding: 10px;
  }

  @include respond-to(desktop) {
    padding: 40px;
  }
}

Este mixin permite lidar com pontos de interrupção usando apenas nomes simples como "mobile" ou "desktop".

2. Mixagem de estilos de botão

A criação de botões pode ser repetitiva. Este mixin permite criar botões com cores diferentes, mantendo os outros estilos iguais.

@mixin button($bg-color, $text-color: #fff) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// Usage
.button-primary {
  @include button(#007BFF);
}

.button-secondary {
  @include button(#6C757D);
}

Agora você pode criar botões rapidamente com apenas uma linha de código, ajustando as cores conforme necessário.

3. Tipografia Mixin

A tipografia é importante para qualquer site. Este mixin permite configurar tipografia responsiva com apenas algumas linhas de código.

@mixin typography($font-size, $line-height: 1.5, $weight: normal) {
  font-size: $font-size;
  line-height: $line-height;
  font-weight: $weight;

  @include respond-to(mobile) {
    font-size: $font-size * 0.9;
  }

  @include respond-to(desktop) {
    font-size: $font-size * 1.1;
  }
}

// Usage
h1 {
  @include typography(32px, 1.2, bold);
}

p {
  @include typography(16px);
}

Este mixin ajuda você a garantir que os tamanhos das fontes fiquem bem em telas pequenas e grandes.

4. Função para Unidades Rem

Esta função converte valores de px em rem, tornando seu código mais fácil de escalar para diferentes dispositivos.

@function px-to-rem($px, $base-font-size: 16px) {
  @return $px / $base-font-size * 1rem;
}

// Usage
.container {
  padding: px-to-rem(32);
}

Em vez de converter manualmente pixels em unidades rem, você pode usar esta função para fazer isso automaticamente.

5. Função de ajuste de cor

Precisa mudar uma cor rapidamente? Esta função escurece ou clareia uma cor com base na sua entrada.

@function adjust-color-brightness($color, $amount) {
  @if $amount > 0 {
    @return lighten($color, $amount);
  } @else {
    @return darken($color, abs($amount));
  }
}

// Usage
.header {
  background-color: adjust-color-brightness(#007BFF, -10%); // Darker blue
}

Com esta função, você pode criar facilmente tons mais claros ou mais escuros de uma cor, perfeitos para efeitos de foco ou temas.

6. Mixagem de layout de grade

Criar layouts de grade é fácil com este mixin. Permite definir o número de colunas e o espaço entre elas.

@mixin grid-layout($columns: 3, $gap: 20px) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  grid-gap: $gap;
}

// Usage
.grid {
  @include grid-layout(4, 30px);
}

Este mixin simplifica o processo de criação de layouts de grade, permitindo que você personalize o número de colunas e lacunas.

Conclusão:

Mixins e funções no SCSS ajudam você a escrever CSS mais limpo e eficiente. Com apenas algumas linhas de código, você pode tornar seus estilos mais flexíveis e fáceis de manter. Esteja você criando designs responsivos, botões ou layouts dinâmicos, mixins e funções SCSS podem facilitar sua vida como desenvolvedor. Experimente-os em seu próximo projeto!