Listas

Compatibilidade (Parênteses Reto):

Sass de Dart

✓

LibSass

since 3.5.0

Sass de Ruby

since 3.5.0

▶

As listas contém uma sequência de outros valores. Na Sass, os elementos na listas podem ser separados pos vírgulas (Helvetica, Arial, sans-serif), espaços (10px 15px 0 0), ou barras enquanto for consistente dentro da lista. Ao contrário da maioria das outras linguagens, listas em Sass não requerem parêntesis especiais; quaisquer expressões separados com espaços ou vírgulas contem como uma lista. No entanto, estás autorizado a escrever listas com parênteses reto ([line1 line2]), o que é útil quando usas grid-template-columns.

As listas de Sass podem conter um ou mesmo nenhum elemento. Uma lista de um único elemento pode ser escrito ou (<expression>,) ou [<expression>], e uma lista de zero elemento pode ser escrito ou () ou []. Além disto, todas funções de lista tratarão valores individuais que não estão nas listas como se estivessem as listas a conter aquele valor, o que significa que raramente precisas de explicitamente criar as listas de um único elemento.

Listas Separadas por BarraListas Separadas por Barra permalink

As listas na Sass podem ser separadas por barras, para representar os valores como a abreviação font: 12px/30px para definir a font-size e line-height ou a sintaxe hsl(80 100% 50% / 0.5) para criar uma color com um dado valor de opacidade. No entanto, as listas separadas por barra não podem atualmente ser escrito literalmente**. A Sass historicamente usava o carácter / para indicar a divisão, assim embora a transição das folhas de estilos existentes para usar math.div() as listas separadas por barra pode apenas ser escrita usando list.slash().

Para mais detalhes, consulte Mudança de Rutura: Barra como Divisão.

Usando ListasUsando Listas permalink

A Sass fornece uma mão-cheia de funções que torna possível usar listas para escrever bibliotecas de estilo poderosas, ou tornar a folha de estilo da tua aplicação mais clara e sustentáveis.

ÍndicesÍndices permalink

Muitas destas funções recebem ou retornam números, chamados índices, que fazem referência aos elementos numa lista. O índice 1 indica o primeiro elemento da lista. Nota que isto é diferente de muitas linguagens de programação onde os índices começam no 0! A Sass também torna fácil fazer referência ao final duma lista. O índice -1 faz referência ao último elemento numa lista, -2 faz referência ao penúltimo, e assim por diante.

Acessar um ElementoAcessar um Elemento permalink

As listas não são de muito uso se não puderes receber valores delas. Tu podes usar a função list.nth($list, $n) para receber o elemento num dado índice numa lista. O primeiro argumento é a própria lista, e o segundo é o índice do valor que queres extrair:

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

@debug list.nth(10px 12px 16px, 2)  // 12px
@debug list.nth([line1, line2, line3], -1)  // line3

Fazer Algo com Todos os ElementosFazer Algo com Todos os Elementos permalink

Este na realidade não usa uma função, mas continua uma das maneiras mais comuns usar as listas. O regra @each avalia um bloco de estilos por cada elemento numa lista, e atribui este elemento à uma variável:

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

$sizes: 40px, 50px, 80px

@each $size in $sizes
  .icon-#{$size}
    font-size: $size
    height: $size
    width: $size

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

Adicionar à uma ListaAdicionar à uma Lista permalink

É também útil adicionar elementos à uma lista. A função list.append($list, $val) recebe uma lista e um valor, e retorna uma cópia da lista com o valor adicionado ao final. Nota que uma vez as listas de Sass são imutáveis, isto não modifica a lista original:

@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]

@debug append(10px 12px 16px, 25px)  // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2)  // [col1-line1, col1-line2]

Encontrar um Elemento numa ListaEncontrar um Elemento numa Lista permalink

Se precisas de verificar se um elemento está numa lista ou descobrir em qual índice se encontra, use a função list.index($list, $value). Esta recebe uma lista e um valor à localizar nesta lista, e retorna o índice deste valor:

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null

@debug list.index(1px solid red, 1px)  // 1
@debug list.index(1px solid red, solid)  // 2
@debug list.index(1px solid red, dashed)  // null

Se o valor não estiver na lista, list.index() retorna null. Já que null é falso, podes usar list.index() com @if ou if() para verificar se uma lista contém ou não contém um dado valor:

@use "sass:list";

$valid-sides: top, bottom, left, right;

@mixin attach($side) {
  @if not list.index($valid-sides, $side) {
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
  }

  // ...
}

@use "sass:list"

$valid-sides: top, bottom, left, right

@mixin attach($side)
  @if not list.index($valid-sides, $side)
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}."


  // ...

ImutabilidadeImutabilidade permalink

As listas na Sass são imutáveis, o que significa que o conteúdo dum valor de lista nunca muda. As funções de lista da Sass retornam todas novas listas ao invés de modificar os originais. A imutabilidade ajuda a evitar muitos erros de programação sorrateiros que podem infiltrar-se quando a mesma lista for partilhada através de diferentes partes da folha de estilos.

Tu podes continuar a atualizar o teu estado ao longo do tempo atribuindo novas listas para a mesma variável. Isto é muitas vezes usado em funções e misturas para colecionar um grupo de valores em uma lista:

@use "sass:list";
@use "sass:map";

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@function prefixes-for-browsers($browsers) {
  $prefixes: ();
  @each $browser in $browsers {
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser));
  }
  @return $prefixes;
}

@debug prefixes-for-browsers("firefox" "ie"); // moz ms

@use "sass:list"
@use "sass:map"

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@function prefixes-for-browsers($browsers)
  $prefixes: ()
  @each $browser in $browsers
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser))

  @return $prefixes


@debug prefixes-for-browsers("firefox" "ie")  // moz ms

Listas de ArgumentoListas de Argumento permalink

Quando declaras uma mistura ou função que recebe argumentos arbitrário, o valor que recebes é uma lista especial conhecida como um lista de argumento. Ela age apenas como uma lista que contém todos os argumentos passados às misturas ou função, com uma funcionalidade adicional: se o utilizador passou argumentos de palavra-chave, podem ser acessados como um mapa passando a lista de argumento a função meta.keywords():

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}