Portal de serviços SCSS Primer

O SCSS é um subconjunto da especificação Syntacticamente impressionante de folhas de estilo (Sass) e é uma extensão do CSS. Cada folha de estilos CSS válida é SCSS válida.

Variáveis de SCSS

As variáveis 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 de CSS que queira reutilizar. O SCSS usa o símbolo $ para tornar algo uma variável.

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

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

As variáveis também podem ser argumentos ou resultados de uma das várias funções ou combinações disponíveis. 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 Sass, consulte a Referência de Sass/SCSS.

Funções 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 dos valores vermelho, verde, azul e alfa.
red($color)	Obtém o componente vermelho de uma cor.
verde ($cor)	Obtém o componente verde de uma cor.
blue($color)	Obtém o componente azul de uma cor.
mistura($cor1, $cor2, [$peso])	Mistura duas cores.

Funções de HSL

Função	Descrição	Disponibilidade
hsl($hue, $saturation, $lightness)	Cria uma cor a partir dos valores de matiz, saturação e brilho.	Sim
hsla($hue, $saturation, $lightness, $alpha)	Cria uma cor a partir dos valores de matiz, saturação, brilho e alfa.	Sim
hue($color)	Obtém o componente de matiz de uma cor.	Sim
saturation($color)	Obtém o componente de saturação de uma cor.	Sim
lightness($color)	Obtém o componente de brilho de uma cor.	Sim
ajuste-hue($cor, $graus)	Altera o tom de uma cor.	Sim
lighten($color, $amount)	Torna uma cor mais clara.	Sim
escurecer ($cor, $valor)	Torna a cor mais escura.	Sim
saturate($cor, $valor)	Torna a cor mais rica.	Sim
desaturate($color, $amount)	Torna a cor menos carregada.	Sim
tons de cinza ($color)	Converte uma cor em escala de cinza.	Sim
complemento ($color)	Retorna o complemento de uma cor.	Não
invert($color)	Retorna o inverso de uma cor.	Não

Funções de opacidade

Função	Descrição	Disponibilidade
alfa ($cor)	Obtém o componente alfa (pacidade) de uma cor.	Sim
opacity($color)	Obtém o componente alfa (pacidade) de uma cor.	Sim
rgba($cor, $alfa)	Altera o componente alfa para uma cor.	Sim
opacify($cor, $valor)	Torna a cor mais opaca.	Não
Fade-in ($color, $amount)	Torna a cor mais opaca.	Não
transparenteize($color, $amount)	Torna a cor mais transparente.	Não
Fade-out($color, $amount)	Torna a cor mais transparente.	Não

Outras funções de cor

Função	Descrição	Disponibilidade
ajuste-cor ()	Aumenta ou diminui um ou mais componentes de uma cor.	Sim
scale-color ()	Dimensiona fluidamente uma ou mais propriedades de uma cor.	Sim
mudança-cor ()	Altera uma ou mais propriedades de uma cor.	Não
isto é, hexadecimal-str()	Converte uma cor no formato compreendido pelos filtros do IE.	Não

Funções de cadeia de caracteres

Função	Descrição	Disponibilidade
retirar aspas ($cadeia de caracteres)	Remove aspas de uma cadeia de caracteres.	Sim
quote($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($string, $insert, $index)	Insere $insert em $string em $index.	Não
str-index($cadeia de caracteres, $subcadeia de caracteres)	Retorna o índice da primeira ocorrência de $substring em $string.	Não
str-slice($string, $start-at, [$end-at])	Extrai uma substring de $string.	Não
to-upper-case($cadeia de caracteres)	Converte uma cadeia de caracteres para maiúscula.	Não
to-lower-case($cadeia de caracteres)	Converte uma cadeia de caracteres para minúscula.	Não

Funções numéricas

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

Funções da 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)	Retorna o tamanho de uma lista.
nth($lista, $n)	Retorna um item específico em uma lista.
set-nth($lista, $n, $valor)	Substitui o enésimo item em uma lista.
join($list1, $list2)	Une duas listas em uma.
append($list1, $val)	Anexa um único valor ao final de uma lista.
zip($listas...)	Combina várias listas em uma única lista multidimensional.
index($lista, $valor)	Retorna a posição de um valor em uma lista.
list-separator($list)	Retorna o separador de uma lista.

Adição de funções personalizadas

Scss @function my-calculation-function($some-number, $another-number){ @return $some-number + $another-number }

Aninhamento de SCSS

O SCSS permite aninhar seus seletores de CSS de uma forma que segue a mesma hierarquia visual do seu 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;
  }
}

Os seletores ul, lie a estão aninhados dentro do seletor nav, que é uma ótima maneira de organizar seu CSS e torná-lo mais legível. Quando o widget é renderizado, o CSS gerado é semelhante ao 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 Sass, consulte a Referência de Sass/SCSS.

Operadores SCSS

O SCSS tem vários operadores matemáticos padrão, como +, -, *, / e %.

Use a matemática simples para calcular as larguras de um aparte e 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 é semelhante a:

.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 Sass, consulte a Referência de Sass/SCSS.

Mixins SCSS

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

O bloco de código a seguir é um exemplo de raio de borda.

@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 é semelhante a:

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

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