---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Primer do SCSS do portal de serviços

# Primer do SCSS do portal de serviços {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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 {#ariaid-title2}

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

{#css-variables__ul_jnq_rmr_1y}

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](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations).

## Funções do SCSS {#ariaid-title3}

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

### Funções RGB

{#scss-functions__table_qqh_4sf_ny__entry__2}

| 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. |
[ ]

{#scss-functions__table_qqh_4sf_ny}

### Funções de HSL

{#scss-functions__table_gqs_mtf_ny__entry__3}

| 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 |
[ ]

{#scss-functions__table_gqs_mtf_ny}

### Funções de opacidade

{#scss-functions__table_ajx_d5f_ny__entry__3}

| 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 |
[ ]

{#scss-functions__table_ajx_d5f_ny}

### Outras funções de cor

{#scss-functions__table_erm_45f_ny__entry__3}

| 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 |
[ ]

{#scss-functions__table_erm_45f_ny}

### Funções de cadeia de caracteres

{#scss-functions__table_u3t_gvf_ny__entry__3}

| 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 |
[ ]

{#scss-functions__table_u3t_gvf_ny}

### Funções numéricas

{#scss-functions__table_yjg_zvf_ny__entry__3}

| 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 |
[ ]

{#scss-functions__table_yjg_zvf_ny}

### 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.  
{#scss-functions__table_wdc_2wf_ny__entry__2}

| 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. |
[ ]

{#scss-functions__table_wdc_2wf_ny}

### Adicionando funções personalizadas

A função my-calculation-function(

## Aninhamento do SCSS {#ariaid-title4}

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](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations).

## Operadores de SCSS {#ariaid-title5}

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](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations).

## SCSS Mixins {#ariaid-title6}

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](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations).