Portal de serviços do SCSS

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 5 min. de leitura

    • O SCSS é um subconjunto da especificação Syntacticamente impressionante de estilos (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 CSS que queira reutilizar. O SCSS usa o símbolo $ para transformar algo em uma variável.

    O SCSS oferece suporte aos 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 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 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.
    vermelho ($color) Obtém o componente vermelho de uma cor.
    verde ($color) Obtém o componente verde de uma cor.
    azul($color) Obtém o componente azul de uma cor.
    mistura($color1, $color2, [$weight]) 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 iluminação. Sim
    hsla($hue, $saturation, $lightness, $alpha) Cria uma Cor a partir de 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 iluminação de uma cor. Sim
    ajuste-hue($color, $degress) Muda o tom de uma cor. Sim
    clarear ($color, $amount) Torna a cor mais clara. Sim
    escurecer ($color, $amount) Torna a cor mais escura. Sim
    saturate($color, $amount) Torna a cor mais rica. Sim
    dessaturate($color, $amount) Torna a cor menos rica. Sim
    tons de cinza ($color) Converte uma cor em escala de cinza. Sim
    complemento($color) Retorna o complemento de uma cor. Não
    inverter($color) Retorna o inverso de uma cor. Não

    Funções de opacidade

    Função Descrição Disponibilidade
    alfa($color) Obtém o componente alfa (pacidade) de uma cor. Sim
    opacity($color) Obtém o componente alfa (pacidade) de uma cor. Sim
    rgba($color, $alpha) Altera o componente alfa de uma cor. Sim
    opacify($color, $amount) Torna a cor mais opaca. Não
    Fade-in($color, $amount) Torna a cor mais opaca. Não
    transparentize($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
    ajustar cor () Aumenta ou diminui um ou mais componentes de uma cor. Sim
    escala-cor() Dimensiona fluidamente uma ou mais propriedades de uma cor. Sim
    mudança de cor () 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
    unquote($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($string, $insert, $index) Insere $insert em $string em $index. Não
    str-index($string, $substring) 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 em maiúscula. Não
    to-lower-case($cadeia de caracteres) Converte uma cadeia de caracteres em minúsculas. Não

    Funções numéricas

    Função Descrição Disponibilidade
    percentual ($number) Converte um número sem unidade em 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 ($number) 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($numbers…) Encontra o mínimo de vários números. Sim
    máx($numbers…) Encontra o máximo de vários números. Sim
    aleatório([$limit]) 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) Acrescenta 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.

    Adicionando 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 é algo como 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 Sass, consulte a referência 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 um 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 Sass/SCSS.

    Combinações 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 Sass/SCSS.