SCSS Primer do Portal de serviços

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 5 min. de leitura

    • 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 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

    Variáveis também podem ser argumentos ou resultados de uma das várias funções ou mixins 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 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 de 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.
    cor 1, cor 2, peso Mistura duas cores.

    Funções do 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
    brilho (cor) Obtém o componente de luminosidade de uma cor. Sim
    ajustar matiz (cor, graus) Muda o matiz de uma cor. Sim
    clarear (cor, valor) Torna uma cor mais clara. Sim
    escurecer (cor, valor) Torna uma cor mais escura. Sim
    saturar (cor, valor em dólares) Torna uma cor mais saturada. Sim
    dessaturar (cor, valor) Torna uma cor menos saturada. Sim
    escala de cinza (cor) Converte uma cor em escala de cinza. Sim
    complemento (cor) Retorna o complemento de uma cor. Não
    inverter (cor) Retorna o inverso de uma cor. Não

    Funções de opacidade

    Função Descrição Disponibilidade
    alfa (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) 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
    desbotamento (cor, valor) 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-color () Escala fluentemente uma ou mais propriedades de uma cor. Sim
    change-color () Muda 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
    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( cadeia de caracteres, inserção, índice) 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 cadeia de caracteres. Não
    str-slice( cadeia de caracteres, início em, término em]) Extrai uma substring da cadeia de caracteres. Não
    para maiúsculas (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
    percentual (número) Converte um número sem unidade em uma porcentagem. Sim
    arredondar (número) Arredonda um número para o número inteiro mais próximo. Sim
    ceil (número) Arredonda um número para o próximo número inteiro. Sim
    andar (número) Arredonda um número para baixo para 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( Retorna um número aleatório. Não

    Listar funções

    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 de dólares) Retorna o tamanho de uma lista.
    enth (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.
    ingresso (lista 1, lista 2) Une duas listas em uma.
    anexar ( Anexa um único valor ao final de uma lista.
    zip (listas...) Combina várias listas em uma única lista multidimensional.
    índice (lista de 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.

    Adição de funções personalizadas

    Função my-calculation-function(

    Aninhamento do SCSS

    O SCSS permite aninhar seus 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 . 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 SCSS

    O SCSS tem alguns operadores de matemática padrão, como ", ", ", ", ", " e " %".

    Use matemática simples para calcular as 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 é 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 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 é semelhante a: 
    .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 .