Pré-processadores CSS: SASS e LESS

 

Uma prévia da aula de Pré-processadores CSS: SASS e LESS

Pré-processadores CSS são ferramentas que permitem escrever CSS de forma mais eficiente e produtiva, oferecendo recursos como variáveis, mixins, funções e herança.

SASS (Syntactically Awesome Style Sheets) e LESS (Leaner Style Sheets) são os dois pré-processadores CSS mais populares. Ambos são baseados em CSS, porém, trazem uma sintaxe mais avançada e recursos extras.

Com SASS e LESS, é possível definir variáveis para cores, tamanhos de fontes e outros valores que se repetem em várias partes do código, permitindo uma fácil atualização e manutenção do CSS.

Também é possível criar mixins, que são blocos de código reutilizáveis que podem incluir propriedades CSS e até mesmo funções para ajudar na manipulação de valores.

Além disso, SASS e LESS oferecem recursos como aninhamento, operações matemáticas, diretivas condicionais e loops, o que torna a escrita de CSS muito mais flexível e poderosa.

Vamos explorar esses recursos e como utilizá-los na prática durante a aula de Pré-processadores CSS: SASS e LESS.

// Variáveis
$primary-color: #007bff;
$secondary-color: #6c757d;

// Mixins
@mixin button-styles {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}

// Botões
.button-primary {
  background-color: $primary-color;
  color: white;
  @include button-styles;
}

.button-secondary {
  background-color: $secondary-color;
  color: white;
  @include button-styles;
}

// Animação
@mixin animation-slide($direction) {
  @if $direction == right {
    transform: translateX(100%);
  } @else if $direction == left {
    transform: translateX(-100%);
  }

  animation: slide-in-$direction 0.3s ease-in-out forwards;
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

// Slideshow
.slideshow {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  .slideshow-item {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: center;
    padding: 1rem;
    box-sizing: border-box;

    img {
      max-width: 100%;
      height: auto;
    }
  }

  .slideshow-item:nth-child(odd) {
    background-color: #f8f9fa;
  }

  .slideshow-item:nth-child(even) {
    background-color: #e9ecef;
  }

  .slideshow-item.active {
    @include animation-slide(left);
  }

  .slideshow-item.inactive {
    @include animation-slide(right);
  }
}

Este é um exemplo de código em SASS que inclui o uso de variáveis, mixins, botões estilizados e uma animação de slide para um slideshow. Observe que as variáveis são definidas no início do código, e os botões usam um mixin para aplicar estilos comuns. A animação de slide é definida em um mixin e reutilizada em duas classes diferentes (.slideshow-item.active e .slideshow-item.inactive). O código também usa recursos avançados do CSS, como flexbox, scroll-snap e animações.