> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/sass/colors.md).

# Colors

## Comment définir les couleurs ?

Après avoir récupéré toutes les couleurs présentes sur la maquette :  

* Ranger les couleurs dans un tableau
* Indiquer leurs variantes en RGB 

```scss
$colors-scheme: (
  primary: $primary,
  secondary: $secondary,
  text-color: $text-color,
  light: $light,
  dark: $dark,
  primary--rgb: hexToRGB($primary),
  secondary--rgb: hexToRGB($secondary),
  text-color--rgb: hexToRGB($text-color),
  light--rgb: hexToRGB($light),
  dark--rgb: hexToRGB($dark),
  white--rgb: "255,255,255",
  black--rgb: "0,0,0",
);
```

Par la suite, chaque couleur est initialisée dans le `:root` afin de les appeler via la fonction `var()`

```scss
:root {
  @each $name, $color in $colors-scheme {
    #{$name}: $color;
  }
}
```

Après ça, on boucle sur le tableau pour créer des classes CSS génériques pour chaque couleur 

```scss
@each $name, $color in $colors-scheme {
  @if not (str-index($name, '--rgb')) {
    .color-#{$name} {
      color: color(#{$name}) !important;
    }
    .color-hover-#{$name} {
      transition: $default-transition;
      &:hover {
        color: color(#{$name}) !important;
      }
    }
  }
}  
```

{% hint style="info" %}
À noter qu'on vérifie que la couleur est bien en hexadécimal pour la création des classes.
{% endhint %}

## La fonction color()

La fonction color() prend en paramètre le nom de la variable ainsi qu'une valeur d'opacité.

```scss
@function color($color-name, $opacity: 1) {
  @return rgba(var(#{$color-name}--rgb), $opacity);
}
```

Elle récupère la version rgb de la couleur présente de la `:root` et renvoie une valeur en RGBA

Exemple : 

```scss
.class {
    color: color(primary);
    background-color: color(white,0.5);
}    

// CSS COMPILÉ
.class {
    color: rgba(80,145,66,1);
    background-color: rgba(255,255,255,0.5);
}
```