Tipos de dados do Sass
O Sass tem vários tipos de dados que podem armazenar desde números até listas. Segue abaixo uma lista com os tipos de dados do Sass:
- Números
- Inteiros ou reais, com ou sem unidade. Exemplos:
25
,9em
e10.7
. - Booleanos
- Podem ser
true
oufalse
(verdadeiro ou falso). - Strings
-
Com aspas simples ou duplas e sem aspas. Exemplos:
Arial
,"Arial"
e'Arial'
. - Nulos
- O valor desse tipo é
null
. - Cores
- Em todas as notações suportadas pelo CSS. Exemplos:
white
e#ba4910
. - Listas
-
Com uma vírgula ou um espaço como separador. Exemplos:
1px solid black
eArial, sans-serif
. - Mapas
-
Delimitados por parênteses e com elementos seguindo a notação chave: valor, separados por vírgulas.
Exemplo:
(altura-menu: 100px, altura-rodape: 200px)
. - Referências de funções
- Retornadas pela função
get-function($function-name)
.
Muitos desses tipos são muito simples, então vamos focar apenas nos três últimos, que são mais complexos: listas, mapas e referências de funções.
Listas
Listas contém conjuntos de valores. Esses valores podem ser separados por espaços ou vírgulas e podem inclusive
ser outras listas. Exemplo: 10em 3em, 2em 5em
. Essa é uma lista que contém duas listas dentro dela,
cada uma com dois elementos. Perceba que as listas internas usam o espaço como separador enquanto a lista
externa usa a vírgula. Quando o separador das listas internas é o mesmo da externa, é necessário delimitar as
listas internas usando parênteses. Exemplo: (10em 3em) (2em 5em)
.
Mapas
Elementos que pertencem a mapas, diferentemente dos elementos das listas, contém uma chave e um
valor. Mapas podem ser usados em qualquer lugar em que listas podem ser usadas. Vale lembrar
que, quando um mapa é usado em uma função de lista, ele é tratado como uma lista de pares (com cada par tendo a
chave e o valor de cada elemento). Assim, o mapa (altura-menu: 100px, altura-rodape: 200px)
é
tratado como a lista altura-menu 100px, altura-rodape 200px
.
Referências de funções
Uma referência de função é um tipo de dado que é retornado pela função
get-function($function-name)
. Ela é uma função que retorna uma função. Esse tipo de dado é útil
quando você quer invocar uma função usando a função call($function, $args...)
. Aí, você passa uma
referência de função como primeiro argumento e os argumentos da função nos demais argumentos.