Sass - DataTypes

Tipos de dados

Tipo de dados é um tipo de informação, que requer a declaração do tipo de dados para cada objeto de dados. A tabela a seguir mostra vários tipos de dados suportados pelo SassScript -

S.No.	Tipo de dados e descrição	Exemplo
1	Numbers Ele representa tipos inteiros.	2, 10,5
2	Strings É uma sequência de caracteres definida entre aspas simples ou duplas.	'Tutorialspoint', "Tutorialspoint"
3	Colors É usado para definir o valor da cor.	vermelho, # 008000, rgb (25,255,204)
4	Booleans Ele retorna tipos booleanos verdadeiros ou falsos.	10> 9 especifica verdadeiro
5	Nulls Ele especifica um valor nulo que é um dado desconhecido.	if (val == null) {// instruções}
6	Space and Comma Representa os valores separados por espaços ou vírgulas.	1px sólido #eeeeee, 0 0 0 1px
7	Mapping Ele mapeia de um valor para outro valor.	FirsyKey: frstvalue, SecondKey: secvalue

Cordas

Strings são séries de caracteres, que são representados entre aspas simples ou duplas. As strings que são definidas com aspas simples ou duplas serão exibidas como valor de string sem aspas usando#{ } interpolação (é uma forma de usar variáveis em seletores).

Exemplo

O exemplo a seguir demonstra o uso de strings no arquivo SCSS -

<html>
   <head>
      <title>Strings</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <h2>Example using Strings</h2>
         <p class = "tutorialspoint">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.scss .

style.scss

$name: "tutorialspoint";

p.#{$name} {
   color: blue;
}

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

sass --watch C:\ruby\lib\sass\style.scss:style.css

A seguir, execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

p.tutorialspoint {
   color: blue;
}

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima em strings.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

Listas

As listas especificam vários valores que são separados por espaços ou vírgulas. Mesmo um único valor é considerado uma lista.

SASS usa algumas das funções da lista, como -

nth function - Fornece item específico da lista.
join function - Reúne várias listas em uma.
append function - Acrescenta o item à outra extremidade da lista.
@each directive - Fornece estilos para cada item da lista.

Por exemplo, considere que existem dois tipos de lista; a primeira lista contém os seguintes valores que são separados por vírgula.

10px 11px, 15px 16px

Se a lista interna e a lista externa tiverem o mesmo separador, você pode usar parênteses para especificar onde ambas as listas começarão e pararão. Você pode especificar essas listas conforme mostrado abaixo -

{10px 11px} {15px 16px}

Mapas

Mapas são combinações de chaves e valores em que as chaves são usadas para representar os valores. Os mapas definem valores em grupos e podem ser acessados dinamicamente. Você pode escrever uma expressão de mapa como -

$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);

Ele usa algumas das funções, como -

map-get - Fornece valores do mapa.
map-merge - Adiciona valores ao mapa.
@each directive - Ele especifica estilos para o par chave / valor no mapa.

Mapas representam pares de chave / valor vazios como ( ) sem elementos e usa o inspect ($value) função para exibir a saída para os mapas.

Cores

É usado para definir o valor de cor SassScript. Por exemplo, se você estiver usando o código de cores como # ffa500 , ele será exibido na cor laranja no modo compactado. O SASS fornece o mesmo formato de saída como digitado nos outros modos de saída, o que se torna uma sintaxe inválida quando uma cor é interpolada em um seletor. Para superar esse problema, use os nomes das cores entre aspas.

↰ Previous page