---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Introduction à la SCSS de Service Portal

# Introduction à la SCSS de Service Portal {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 minutes de lecture

SCSS est un sous-ensemble de la spécification Syntactically Awesome StyleSheets (Sass) et est une extension de CSS. Chaque feuille de style CSS valide est un SCSS valide.

## Variables SCSS {#ariaid-title2}

Les variables SCSS sont un moyen de stocker des informations que vous souhaitez réutiliser dans votre feuille de style. Vous pouvez stocker des éléments tels que les couleurs, les piles de polices ou toute valeur CSS que vous souhaitez réutiliser. SCSS utilise le symbole $ pour faire de quelque chose une variable.

SCSS prend en charge les types de données suivants :

* Nombres (y compris les unités)
* Chaînes (avec ou sans guillemets)
* Couleurs (nom ou noms)
* Booléens

{#css-variables__ul_jnq_rmr_1y}

Les variables peuvent également être des arguments ou des résultats de l'une des nombreuses fonctions ou mixins disponibles. Lors de la traduction, les valeurs des variables sont insérées dans le document CSS de sortie.  
Par exemple :

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

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

Pour plus d'informations sur Sass, consultez la [référence Sass/SCSS.](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations)

## Fonctions SCSS {#ariaid-title3}

Liste des fonctions du compilateur SCSS du portail de services.

### Fonctions RVB

{#scss-functions__table_qqh_4sf_ny__entry__2}

| Fonction | Description |
|-|-|
| rvb($red, $green, $blue) | Crée une couleur à partir de valeurs rouges, vertes et bleues. |
| rgba($red, $green, $blue, $alpha) | Crée une couleur à partir des valeurs rouge, verte, bleue et alpha. |
| rouge($color) | Obtient la composante rouge d'une couleur. |
| vert($color) | Obtient la composante verte d'une couleur. |
| bleu($color) | Obtient la composante bleue d'une couleur. |
| mix($color 1, $color 2, \[$weight\]) | Mélange deux couleurs ensemble. |
[ ]

{#scss-functions__table_qqh_4sf_ny}

### Fonctions HSL

{#scss-functions__table_gqs_mtf_ny__entry__3}

| Fonction | Description | Graphique des disponibilités |
|-|-|-|
| HSL ($hue, $saturation, $lightness) | Crée une couleur à partir des valeurs de teinte, de saturation et de luminosité. | Oui |
| hsla($hue, $saturation, $lightness, $alpha) | Crée une couleur à partir des valeurs de teinte, de saturation, de luminosité et d'alpha. | Oui |
| teinte($color) | Obtient la composante de teinte d'une couleur. | Oui |
| Saturation($color) | Obtient la composante de saturation d'une couleur. | Oui |
| Légèreté($color) | Obtient la composante de luminosité d'une couleur. | Oui |
| adjust-hue($color, $degrees) | Change la teinte d'une couleur. | Oui |
| éclaircir ($color, $amount) | Rend une couleur plus claire. | Oui |
| assombrir($color, $amount) | Rend une couleur plus foncée. | Oui |
| Saturé($color, $amount) | Rend une couleur plus saturée. | Oui |
| désaturer ($color, $amount) | Rend une couleur moins saturée. | Oui |
| niveaux de gris ($color) | Convertit une couleur en niveaux de gris. | Oui |
| complément($color) | Renvoie le complément d'une couleur. | Non |
| inverser($color) | Renvoie l'inverse d'une couleur. | Non |
[ ]

{#scss-functions__table_gqs_mtf_ny}

### Fonctions d'opacité

{#scss-functions__table_ajx_d5f_ny__entry__3}

| Fonction | Description | Graphique des disponibilités |
|-|-|-|
| alpha($color) | Obtient la composante alpha (opacité) d'une couleur. | Oui |
| opacité ($color) | Obtient la composante alpha (opacité) d'une couleur. | Oui |
| rvba($color, $alpha) | Modifie le composant alpha d'une couleur. | Oui |
| opacify($color, $amount) | Rend une couleur plus opaque. | Non |
| Fondu d'entrée ($color, $amount) | Rend une couleur plus opaque. | Non |
| transparentize($color, $amount) | Rend une couleur plus transparente. | Non |
| Fondu ($color, $amount) | Rend une couleur plus transparente. | Non |
[ ]

{#scss-functions__table_ajx_d5f_ny}

### Autres fonctions de couleur

{#scss-functions__table_erm_45f_ny__entry__3}

| Fonction | Description | Graphique des disponibilités |
|-|-|-|
| adjust-color() | Augmente ou diminue un ou plusieurs composants d'une couleur. | Oui |
| scale-color() | Met à l'échelle de manière fluide une ou plusieurs propriétés d'une couleur. | Oui |
| change-color() | Modifie une ou plusieurs propriétés d'une couleur. | Non |
| ie-hex-str() | Convertit une couleur au format compris par les filtres IE. | Non |
[ ]

{#scss-functions__table_erm_45f_ny}

### Fonctions de chaînes

{#scss-functions__table_u3t_gvf_ny__entry__3}

| Fonction | Description | Graphique des disponibilités |
|-|-|-|
| sans guillemet($string) | Supprime les guillemets d'une chaîne. | Oui |
| citation($string) | Ajoute des guillemets à une chaîne. | Oui |
| longueur-str($string) | Renvoie le nombre de caractères d'une chaîne. | Non |
| str-insérer($string, $insert, $index) | Insère $insert dans $string à $index. | Non |
| str-index($string, $substring) | Renvoie l'index de la première occurrence de $substring dans $string. | Non |
| str-slice($string, $start-at, \[$end-at\]) | Extrait une sous-chaîne de $string. | Non |
| majuscules($string) | Convertit une chaîne en majuscules. | Non |
| vers-minuscule($string) | Convertit une chaîne en minuscules. | Non |
[ ]

{#scss-functions__table_u3t_gvf_ny}

### Fonctions numériques

{#scss-functions__table_yjg_zvf_ny__entry__3}

| Fonction | Description | Graphique des disponibilités |
|-|-|-|
| pourcentage($number) | Convertit un nombre sans unité en pourcentage. | Oui |
| arrondi($number) | Arrondit un nombre au nombre entier le plus proche. | Oui |
| ceil($number) | Arrondit un nombre au nombre entier supérieur. | Oui |
| étage($number) | Arrondit un nombre entier au nombre entier inférieur. | Oui |
| ABS($number) | Renvoie la valeur absolue d'un nombre. | Oui |
| min($numbers...) | Trouve le minimum de plusieurs nombres. | Oui |
| max($numbers...) | Trouve le maximum de plusieurs nombres. | Oui |
| aléatoire(\[$limit\]) | Renvoie un nombre aléatoire. | Non |
[ ]

{#scss-functions__table_yjg_zvf_ny}

### Lister les fonctions

Les listes dans SCSS sont immuables. Toutes les fonctions de liste renvoient une nouvelle liste plutôt que de mettre à jour la liste existante sur place.

Toutes les fonctions de liste fonctionnent également pour les cartes, les traitant comme des listes de paires.  
{#scss-functions__table_wdc_2wf_ny__entry__2}

| Fonction | Description |
|-|-|
| longueur($list) | Renvoie la longueur d'une liste. |
| nth ($list, $n) | Renvoie un élément spécifique dans une liste. |
| set-nth($list, $n, $value) | Remplace le nième élément d'une liste. |
| join($list 1, $list 2) | Réunit deux listes en une seule. |
| ajouter ($list 1, $val) | Ajoute une valeur unique à la fin d'une liste. |
| code postal ($lists...) | Combine plusieurs listes en une seule liste multidimensionnelle. |
| index($list, $value) | Renvoie la position d'une valeur dans une liste. |
| séparateur_liste($list) | Renvoie le séparateur d'une liste. |
[ ]

{#scss-functions__table_wdc_2wf_ny}

### Ajout de fonctions personnalisées

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

## Imbrication SCSS {#ariaid-title4}

SCSS vous permet d'imbriquer vos sélecteurs CSS d'une manière qui suit la même hiérarchie visuelle que votre HTML.  
Par exemple :

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

      li { display: inline-block; }

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

Les sélecteurs `ul`, `li` et `a` sont imbriqués dans le sélecteur `de navigation` , ce qui est un excellent moyen d'organiser votre CSS et de le rendre plus lisible. Lorsque le widget est affiché, le CSS généré ressemble au bloc de code suivant :

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

    nav li {
      display: inline-block;
    }

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

Pour plus d'informations sur Sass, consultez la [référence Sass/SCSS.](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations)

## Opérateurs SCSS {#ariaid-title5}

SCSS dispose d'une poignée d'opérateurs mathématiques standard tels que +, -, \*, / et %.  
Utilisez des mathématiques simples pour calculer la largeur d'un aparté `et` d'un article. Par exemple :

    .container { width: 100%; }

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

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

Le CSS généré se présente comme suit :

    .container {
      width: 100%;
    }

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

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

Pour plus d'informations sur Sass, consultez la [référence Sass/SCSS.](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations)

## Mixins SCSS {#ariaid-title6}

Un mixin vous permet de créer des groupes de déclarations CSS que vous souhaitez réutiliser sur l'ensemble de votre site. Vous pouvez transmettre des valeurs pour rendre votre mixin plus flexible.  
Le bloc de code suivant est un exemple 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); }

Le CSS généré se présente comme suit :

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

Pour plus d'informations sur Sass, consultez la [référence Sass/SCSS.](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations)