> 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/mixins-function.md).

# Mixins/function

### Mixins

Les mixins en SASS servent à réutiliser un ensemble de propriétés CSS commun à plusieurs éléments afin d'optimiser et de limiter la duplication de code. 

Les mixins peuvent accepter des arguments afin de les rendre dynamiques.

{% hint style="info" %}
Créer vos propres mixins en fonction du design demandé pour factoriser des ensembles de styles qui se répètent.
{% endhint %}

Exemple :

```scss
@mixin undoListStyles() {
  padding: 0;
  margin: 0;
  list-style: none;
}
```

{% hint style="success" %}
Liste des mixins à utiliser
{% endhint %}

```scss
// Pseudo élément
@include pseudo()
```

```scss
// Conteneur flex
@include flex(row,wrap,flex-start,center);
```

```scss
// Créé une media query
@include breakpoint($taille_en_px)
```

```scss
// Enlève le style de base des <ul>
@include undoListStyles()
```

```scss
// Ajouter une icone burger
@include burger($width, $height, $gutter, $color)
```

### Fonctions

Contrairement aux mixins, les fonctions servent à retourner une valeur qui peut, par la suite, être réutilisée à l'intérieur d'une propriété CSS.

{% hint style="danger" %}
Les fonctions ne compilent pas le CSS contrairement aux mixins, elles renvoient simplement la valeur.
{% endhint %}

Exemple de fonction

```scss
// retourne la couleur au format rgba
@function color($color-name, $opacity: 1) {
  @return rgba(var(#{$prefix-color}#{$color-name}--rgb), $opacity);
}

// utilisation
.element {
 color: color(primary);
 background-color: color(black,0.5);
}
```

{% hint style="success" %}
Liste des fonctions à utiliser
{% endhint %}

```scss
// Convertit une taille px en rem
rem($taille_en_px)
```

```scss
// Retourne la valeur en rgba
color($color, $opacity)
```