Articles
Introdução ao SASS/SCSS
Listas no SASS

Listas no SASS

Este artigo explica as listas no SASS.

Vamos abordar os usos básicos e avançados das listas no SASS e fornecer exemplos práticos.

YouTube Video

Listas no SASS

O SASS oferece recursos úteis semelhantes à programação como uma extensão ao CSS. Entre esses recursos, as listas são muito úteis ao definir estilos de forma dinâmica.

O que é uma lista no SASS?

Uma lista no SASS é uma coleção de valores separados por vírgulas (,) ou espaços. Elas são usadas ao passar múltiplos valores para propriedades CSS ou ao realizar iterações.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

As principais características das listas incluem os seguintes pontos:.

  • Uma lista pode conter valores de qualquer tipo de dado, como números, strings ou cores.
  • Você pode escolher entre listas separadas por vírgulas ou por espaços dependendo do caso de uso.

Exemplo Básico de Definição de Estilo Usando Listas

Abaixo está um exemplo de geração dinâmica de estilos de borda simples usando listas.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

Saída da Compilação 

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}
  • Com a função nth() do módulo sass:list, você pode recuperar um valor específico de uma lista.

Manipulação de Listas

O módulo sass:list fornece funções para manipulação de listas, facilitando a recuperação e adição de elementos.

Recuperar um Elemento: nth()

nth() é uma função que recupera um elemento de uma lista.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
  • Neste código, a função nth() é usada para obter o valor no índice especificado.

Verificar o Índice: index()

index() é uma função que retorna a posição de um elemento em uma lista.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
  • Neste código, index() é utilizada para obter que o elemento blue é o terceiro item da lista.

Obter Comprimento da Lista: length()

length() é uma função que retorna o comprimento de uma lista.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
  • Neste código, a função length() é usada para obter o número de valores na lista.

Adicionar um Elemento: append()

append() é uma função usada para adicionar elementos a uma lista.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
  • Neste código, a função append() é usada para adicionar um valor à lista.

Substituir um Elemento: set-nth()

set-nth() é uma função que substitui o elemento em uma posição especificada por outro valor.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
  • Neste código, set-nth() é utilizada para substituir o segundo elemento por yellow.

Combinar Listas: join()

join() é uma função que combina duas listas.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
  • Neste código, join() é utilizada para combinar duas listas em uma só.

Emparelhar Listas: zip()

zip() é uma função que agrupa várias listas elemento por elemento.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
  • Neste código, zip() é utilizada para combinar nomes e idades em pares.

Listas Aninhadas

Listas também podem ser aninhadas, permitindo seu uso como arrays bidimensionais.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red
  • Ao manipular estruturas de dados complexas assim, a geração de estilos avançados se torna possível.

Exemplo Prático: Gerando Gradientes

Aqui está um exemplo de como gerar gradientes de forma eficiente usando listas.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

Saída da Compilação 

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

  • Este código é um exemplo de geração automática de gradientes usando listas em SCSS.

    • As cores usadas para o gradiente são definidas na lista $colors.
    • Na função gradient(), uma posição é calculada e atribuída uniformemente para cada cor com base no número de cores, criando assim uma lista para o gradiente.
    • Na classe .background, o linear-gradient é usado para combinar a lista de cores gerada e aplicar um gradiente horizontal.

  • Como as posições são calculadas automaticamente de acordo com o comprimento da lista de cores, você pode criar um gradiente uniforme facilmente adicionando ou alterando cores.

Cuidados e Melhores Práticas

Os seguintes pontos podem ser considerados ao usar listas:.

  • Tipo de Separador da Lista Listas separadas por vírgula e por espaço são tratadas de forma diferente, portanto você deve escolher adequadamente conforme a situação.

  • Tamanho da Lista Ao manipular listas de forma dinâmica, é seguro verificar o tamanho usando a função length().

  • Gerenciando Listas Aninhadas Ao lidar com listas aninhadas, operações cuidadosas de índice podem ajudar a evitar erros.

Conclusão

Listas no SASS são uma ferramenta poderosa para definir estilos dinamicamente e gerenciar designs complexos de forma eficiente.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Strings em SASSMapas no SASS