DEV Community

Rodrigo Oler
Rodrigo Oler

Posted on • Edited on

2 1 1 1 2

Utilizando Mixins com SCSS para criar breakpoints

sass


Introdução

Um dos principais desafios no desenvolvimento web é a criação de um design responsivo que se adapte perfeitamente a todos os tipos de dispositivos. Nesse contexto, o Sass (Syntactically Awesome Stylesheets) e, mais especificamente, o SCSS (Sassy CSS) têm-se mostrado ferramentas poderosas para o controle eficiente de estilos CSS. Uma das funcionalidades mais úteis do SCSS é a capacidade de criar mixins, que são blocos de código reutilizáveis.


O que são Breakpoints?

Os breakpoints são pontos onde o conteúdo de um site ou aplicativo responde com mudanças de layout para se adaptar a diferentes tamanhos de tela. Eles são essenciais para ajustar a aparência de um site para dispositivos móveis, tablets e desktops.


Criando um Mixin para Breakpoints

O SCSS permite a criação de mixins para encapsular estilos que serão reutilizados. Vejamos como criar um mixin para breakpoints:

@mixin breakpoint($point) {
  @if $point == small {
    @media (max-width: 600px) { @content; }
  }
  @elseif $point == medium {
    @media (max-width: 900px) { @content; }
  }
  @elseif $point == large {
    @media (max-width: 1200px) { @content; }
  }
}
Enter fullscreen mode Exit fullscreen mode

Este mixin permite que você especifique estilos diferentes para três breakpoints diferentes: pequeno, médio e grande. O @content permite que você passe blocos de estilos para o mixin, que serão aplicados no breakpoint especificado.


Utilizando o Mixin de Breakpoint

Agora que criamos nosso mixin, vamos usá-lo. Por exemplo, podemos querer alterar a cor do fundo de uma div quando a tela é menor que 600px (small):

.div-example {
  background-color: blue;

  @include breakpoint(small) {
    background-color: red;
  }
}
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, a div terá uma cor de fundo azul em telas maiores que 600px. No entanto, quando a tela for menor que 600px, o mixin irá aplicar o estilo dentro do bloco breakpoint(small), mudando a cor do fundo para vermelho.


Exemplo em HTML

Agora, aplicando isso em HTML, temos:

<div class="div-example">Este é um exemplo de uma div com design responsivo.</div>
Enter fullscreen mode Exit fullscreen mode

Com nosso SCSS compilado para CSS e incluído corretamente na página, o exemplo de div responderá de acordo com os tamanhos de tela que definimos anteriormente.


Conclusão

O uso de mixins com SCSS para a criação de breakpoints é uma estratégia eficaz para gerenciar o CSS responsivo. Ela ajuda a manter seu código limpo, legível e fácil de manter, enquanto proporciona uma experiência de visualização otimizada para os usuários, independentemente do dispositivo que estão usando.

Lembre-se, entretanto, que cada projeto é único e pode necessitar de diferentes números ou valores de breakpoint. Adapte essa estratégia às suas necessidades específicas e lembre-se sempre de testar seu design em diferentes dispositivos para garantir uma experiência de usuário consistente e agradável.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (3)

Collapse
 
keuller profile image
Keuller Magalhães

Parabéns Oler, artigo bem legal mesmo.

Collapse
 
oler profile image
Rodrigo Oler

Obrigado @keuller !

Collapse
 
oler profile image
Rodrigo Oler • Edited

Se você achou este artigo útil, por favor, deixe um "like" e considere compartilhá-lo com seus colegas. Se você tiver sugestões, dicas ou outras estratégias para a organização do CSS responsivo, deixe um comentário! Sua contribuição pode enriquecer ainda mais a discussão e ser de grande ajuda para outros leitores. Obrigado!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more