Les opérateurs dans Sass

Sass te permet d'utiliser divers opérateurs mathématiques tels que l'addition, la soustraction, la multiplication, la division et le modulo. Ces opérateurs peuvent être très utiles, surtout lorsque tu travailles avec des variables et que tu effectues des calculs sur des valeurs.

Addition (+) et soustraction (-)

L'addition et la soustraction fonctionnent comme tu t'y attends. Par exemple :

1.container {
2  width: 800px + 200px; // Résultat : width: 1000px
3}

La soustraction fonctionne de la même manière :

1.container {
2  width: 1000px - 200px; // Résultat : width: 800px
3}

Multiplication (*) et division (/)

La multiplication et la division fonctionnent également comme prévu :

1.container {
2  width: 300px * 2; // Résultat : width: 600px
3}

Avec l'opérateur de division, il faut toutefois être prudent. Sass interprète les valeurs avec une fraction comme une notation abrégée de valeurs CSS, par exemple font: 16px/24px. Pour éviter toute confusion, il est recommandé d'entourer les opérations de division de parenthèses :

1.container {
2  width: (800px / 2); // Résultat : width: 400px
3}

Modulo (%)

L'opérateur modulo renvoie le reste d'une division :

1p {
2  margin: (10 % 3); // Résultat : margin: 1;
3}

Interpolation #{}

Sass propose aussi l'interpolation, qui sert à insérer des valeurs de variables dans des sélecteurs, des noms de propriétés, des valeurs et d'autres endroits qui n'acceptent normalement pas les variables. L'interpolation se définit à l'aide de #{}. Exemple :

1$name: foo;
2$attr: border;
3
4p.#{$name} {
5  #{$attr}-color: blue;
6}

Après compilation en CSS, on obtient :

1p.foo {
2  border-color: blue;
3}

Comme tu peux le voir, les opérateurs dans Sass offrent une grande flexibilité et sont très utiles pour créer du CSS plus dynamique et configurable.

Exercice : calculatrice de styles Sass

Ta tâche consiste à créer une feuille de style à l'aide de Sass qui calcule dynamiquement diverses valeurs CSS en utilisant des opérateurs mathématiques.

Étape 1 : créer un fichier Sass

Crée un fichier Sass nommé styles.scss.

Étape 2 : définir les variables

Définis les variables suivantes :

1$base-width: 800px;
2$base-height: 600px;
3$padding: 20px;
4$multiplier: 1.5;
5$font-size: 16px;
6$spacing: 10px;
7$primary-color: blue;
8$danger-color: red;

Étape 3 : calculs

Utilise les opérateurs pour calculer dynamiquement les valeurs :

1. Ajoute 200px à $base-width pour la classe .container.
2. Soustrais 100px à $base-height pour la classe .header.
3. Multiplie $font-size par $multiplier pour la classe .text-large.
4. Divise $base-width par 2 pour la classe .sidebar.
5. Utilise le modulo sur $spacing par 3 pour la classe .list-item (définis la marge).

Étape 4 : interpolation

Utilise l'interpolation pour définir une classe de bouton avec un arrière-plan dynamique :

1@mixin button($color) {
2  background-color: $color;
3  color: white;
4  padding: $padding;
5  &:hover {
6    background-color: darken($color, 10%);
7  }
8}
9
10.button-primary {
11  @include button($primary-color);
12}
13
14.button-danger {
15  @include button($danger-color);
16}

Étape 5 : HTML

Ajoute le HTML approprié pour tester tes styles :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Sass Project</title>
7  <link rel="stylesheet" href="css/main.css">
8</head>
9<body>
10  <div class="container">
11    <ul>
12      <li class="list-item">Element 1</li>
13      <li class="list-item">Element 2</li>
14      <li class="list-item">Element 3</li>
15    </ul>
16    <button class="button-primary">Primary Button</button>
17    <button class="button-danger">Danger Button</button>
18  </div>
19  <nav class="sidebar">
20    <ul>
21      <li>Link 1</li>
22      <li>Link 2</li>
23      <li>Link 3</li>
24    </ul>
25  </nav>
26</body>
27</html>

Étape 6 : compilation

Compile le fichier Sass en CSS et assure-toi que tous les calculs sont correctement appliqués.

Résultat final

Assure-toi que ton CSS ressemble à ce qui suit :

1.container {
2  width: 1000px; /* 800px + 200px */
3}
4
5.header {
6  height: 500px; /* 600px - 100px */
7}
8
9.text-large {
10  font-size: 24px; /* 16px * 1.5 */
11}
12
13.sidebar {
14  width: 400px; /* 800px / 2 */
15}
16
17.list-item {
18  margin: 1px; /* 10px % 3 */
19}
20
21.button-primary {
22  background-color: blue;
23  color: white;
24  padding: 20px;
25}
26.button-primary:hover {
27  background-color: darkblue;
28}
29
30.button-danger {
31  background-color: red;
32  color: white;
33  padding: 20px;
34}
35.button-danger:hover {
36  background-color: darkred;
37}

Bonne chance !

1<!DOCTYPE html>
2<html lang="en">
3<head><title>Listes déroulantes</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Listes déroulantes</h1>
6<select><option>Ramsès</option><option>Toutânkhamon</option></select>
7</body>
8</html>