Primer do SCSS do portal de serviços

SCSS é um subconjunto da especificação de folhas de estilo sintaticamente impressionantes (Sass) e é uma extensão do CSS. Cada folha de estilo CSS válida é SCSS válido.

Variáveis de SCSS

As variáveis de SCSS são uma maneira de armazenar informações que você deseja reutilizar em toda a folha de estilos. Você pode armazenar itens como cores, pilhas de fontes ou qualquer valor CSS que você achar que deseja reutilizar. O SCSS usa o símbolo

O SCSS é compatível com os seguintes tipos de dados:

• Números (incluindo unidades)
• Cadeias de caracteres (com aspas ou sem)
• Cores (nome ou nomes)
• Boolianos

As variáveis também podem ser argumentos ou resultados de uma das várias funções disponíveis ou mixins. Durante a tradução, os valores das variáveis são inseridos no documento CSS de saída.

Por exemplo:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100%$font-stack;
  color: $primary-color;
}

Para obter mais informações sobre o Sass, consulte Referência de Sass/SCSS .

Funções do SCSS

Lista de funções do compilador SCSS do portal de serviços.

Funções RGB

Função	Descrição
rgb (vermelho, verde, azul)	Cria uma Cor a partir dos valores vermelho, verde e azul.
rgba (vermelho, verde, azul, alfa)	Cria uma Cor a partir de valores vermelho, verde, azul e alfa.
vermelho (cor)	Obtém o componente vermelho de uma cor.
verde (cor)	Obtém o componente verde de uma cor.
azul (cor)	Obtém o componente azul de uma cor.
mistura (cor1, cor2, [peso])	Mistura duas cores juntas.

Funções de HSL

Função	Descrição	Disponibilidade
hsl (matiz, saturação, luminosidade)	Cria uma Cor a partir de valores de matiz, saturação e luminosidade.	Sim
hsla (matiz, saturação, luminosidade, alfa)	Cria uma Cor a partir de valores de matiz, saturação, luminosidade e alfa.	Sim
matiz (cor)	Obtém o componente de matiz de uma cor.	Sim
saturação (cor)	Obtém o componente de saturação de uma cor.	Sim
iluminação (cor)	Obtém o componente de luminosidade de uma cor.	Sim
ajuste-matiz (cor, graus)	Altera o matiz de uma cor.	Sim
clarear (cor, valor em dólares)	Torna uma cor mais clara.	Sim
escurecer (cor, valor em dólares)	Torna uma cor mais escura.	Sim
saturar (cor, valor em dólares)	Torna uma cor mais saturada.	Sim
dessaturar (cor, valor em dólares)	Torna uma cor menos saturada.	Sim
escala de cinza	Converte uma cor em escala de cinza.	Sim
complemento (cor)	Retorna o complemento de uma cor.	Não
invert (cor)	Retorna o inverso de uma cor.	Não

Funções de opacidade

Função	Descrição	Disponibilidade
alpha (cor)	Obtém o componente alfa (opacidade) de uma cor.	Sim
opacidade (cor)	Obtém o componente alfa (opacidade) de uma cor.	Sim
rgba (cor, alfa)	Muda o componente alfa de uma cor.	Sim
opacify (cor, valor em dólares)	Torna uma cor mais opaca.	Não
fade-in (cor, valor)	Torna uma cor mais opaca.	Não
transparente (cor, valor em dólares)	Torna uma cor mais transparente.	Não
fade-out (cor, valor em dólares)	Torna uma cor mais transparente.	Não

Outras funções de cor

Função	Descrição	Disponibilidade
adjust-color ()	Aumenta ou diminui um ou mais componentes de uma cor.	Sim
escala-cor ()	Escala de forma fluida uma ou mais propriedades de uma cor.	Sim
change-color ()	Altera uma ou mais propriedades de uma cor.	Não
ie-hex-str()	Converte uma cor no formato compreendido pelos filtros do IE.	Não

Funções de cadeia de caracteres

Função	Descrição	Disponibilidade
sem aspas (cadeia de caracteres)	Remove aspas de uma cadeia de caracteres.	Sim
cotação (cadeia de caracteres)	Adiciona aspas a uma cadeia de caracteres.	Sim
str-length (cadeia de caracteres)	Retorna o número de caracteres em uma cadeia de caracteres.	Não
str-insert(	Insere a cadeia de caracteres no índice.	Não
str-index (cadeia de caracteres, cadeia de caracteres)	Retorna o índice da primeira ocorrência de substring em string.	Não
str-slice( cadeia de caracteres, início em, término em])	Extrai uma substring da cadeia de caracteres.	Não
para maiúscula (cadeia de caracteres)	Converte uma cadeia de caracteres em maiúsculas.	Não
para minúsculas (cadeia de caracteres)	Converte uma cadeia de caracteres em minúsculas.	Não

Funções numéricas

Função	Descrição	Disponibilidade
porcentagem (número em dólares)	Converte um número sem unidade em uma porcentagem.	Sim
arredondar (número em dólares)	Arredonda um número para o número inteiro mais próximo.	Sim
ceil (número em dólares)	Arredonda um número para cima até o próximo número inteiro.	Sim
andar (número em dólares)	Arredonda um número para baixo até o número inteiro anterior.	Sim
abs (número)	Retorna o valor absoluto de um número.	Sim
(números...)	Encontra o mínimo de vários números.	Sim
(números...)	Encontra o máximo de vários números.	Sim
random([ limite de usd])	Retorna um número aleatório.	Não

Funções de lista

As listas no SCSS são imutáveis. Todas as funções de lista retornam uma nova lista em vez de atualizar a lista existente no local.

Todas as funções de lista também funcionam para mapas, tratando-os como listas de pares.

Função	Descrição
comprimento (lista em dólares)	Retorna o tamanho de uma lista.
nth (lista de dólares, usd n)	Retorna um item específico em uma lista.
set-nth (lista, valor)	Substitui o enésimo item em uma lista.
lista 1, lista2	Une duas listas em uma.
valor	Anexa um único valor ao final de uma lista.
zip (listas...)	Combina várias listas em uma única lista multidimensional.
índice (lista em dólares, valor em dólares)	Retorna a posição de um valor em uma lista.
separador de lista	Retorna o separador de uma lista.

Adicionando funções personalizadas

A função my-calculation-function(

Aninhamento do SCSS

O SCSS permite aninhar os seletores CSS de uma forma que siga a mesma hierarquia visual do HTML.

Por exemplo:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

. ul , li e. r os seletores estão aninhados dentro de nav Seletor, que é uma ótima maneira de organizar seu CSS e torná-lo mais legível. Quando o widget é renderizado, o CSS gerado se parece com o seguinte bloco de código:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Para obter mais informações sobre o Sass, consulte Referência de Sass/SCSS .

Operadores de SCSS

O SCSS tem alguns operadores matemáticos padrão, como mais, -, *, / e %.

Use matemática simples para calcular larguras de um apartado & artigo. Por exemplo:

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

O CSS gerado se parece com:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Para obter mais informações sobre o Sass, consulte Referência de Sass/SCSS .

SCSS Mixins

Um mixin permite criar grupos de declarações CSS que você deseja reutilizar em todo o site. Você pode passar valores para tornar seu mixin mais flexível.

O bloco de código a seguir é um exemplo de border-radius.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

O CSS gerado se parece com:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Para obter mais informações sobre o Sass, consulte Referência de Sass/SCSS .