Les chaînes de caractères dans SASS
Cet article explique les chaînes de caractères dans SASS.
Nous expliquerons étape par étape les opérations de base sur les chaînes jusqu'à l'utilisation avancée des chaînes dans SASS.
YouTube Video
Les chaînes de caractères dans SASS
SASS est un préprocesseur pour étendre le CSS, et les chaînes de caractères sont un élément essentiel pour rendre les définitions de style plus flexibles et dynamiques.
Les bases des chaînes de caractères
Dans SASS, les chaînes peuvent être entourées de guillemets simples ou doubles, et dans certains cas, les guillemets peuvent être omis pour les écrire comme des identifiants. Voici quelques exemples de base pour les écrire.
1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;Notes
- Les chaînes entre guillemets sont directement évaluées comme des littéraux de chaîne.
- Les chaînes non entre guillemets sont souvent traitées comme des identifiants CSS, tels que les noms de classes ou les identifiants, il faut donc veiller à les utiliser correctement.
Concaténation de chaînes
Dans SASS, vous pouvez concaténer des chaînes à l’aide de l’opérateur +.
1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"- Ce code est un exemple d’utilisation de l’opérateur
+dans SASS pour concaténer plusieurs chaînes et en créer une nouvelle.
Exemple avancé : Génération de noms de classe
1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5 content: $base-class + "--" + $modifier; // "btn--primary"
6}- Ce code est un exemple d'utilisation de l’opérateur
+dans SASS pour combiner un nom de classe de base et un modificateur, générant ainsi un nouveau nom de classe.
Utilisation des fonctions de chaîne
SASS fournit des fonctions intégrées pratiques pour diverses opérations sur les chaînes, telles que la gestion des guillemets et l'extraction de sous-chaînes.
quote() et unquote()
Avec les fonctions quote() et unquote(), vous pouvez ajouter ou retirer des guillemets aux chaînes.
1$quoted: quote(Hello); // '"Hello"'
2$unquoted: unquote("Hello"); // Hellostr-length($string)
La fonction str-length() obtient la longueur d'une chaîne.
1$length: str-length("Hello"); // 5str-insert($string, $insert, $index)
La fonction str-insert() insère une chaîne à la position spécifiée.
1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"str-slice($string, $start-at, [$end-at])
La fonction str-slice() extrait une partie d'une chaîne.
1$substring: str-slice("Hello, World!", 1, 5); // "Hello"to-upper-case() et to-lower-case()
Les fonctions to-upper-case() et to-lower-case() convertissent respectivement une chaîne en majuscules ou en minuscules.
1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"Les chaînes dans la logique conditionnelle
En utilisant la directive @if de SASS, vous pouvez faire des branches conditionnelles selon les valeurs de chaînes et changer de style de manière flexible selon les thèmes et paramètres.
1$theme: "dark";
2
3@if $theme == "dark" {
4 body {
5 background-color: black;
6 color: white;
7 }
8} @else {
9 body {
10 background-color: white;
11 color: black;
12 }
13}- Ce code est un exemple d'utilisation de la directive
@ifdans SASS pour vérifier si le thème estdarket adapter le style en conséquence.
Exemple pratique : Génération dynamique de chemins d’images d’arrière-plan
Voici un exemple d'utilisation de manipulations de chaînes pour générer une URL d'image d'arrière-plan.
1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6 background-image: url($image-path + $image-name + $image-extension);
7}Résultat compilé
1.background {
2 background-image: url("/images/background.jpg");
3}- Ce code est un exemple de concaténation de chaînes dans SASS pour générer dynamiquement le chemin d'une image d'arrière-plan et l'appliquer en tant qu’arrière-plan.
Combinaison avec les listes et les maps
En combinant les listes et les maps SASS avec des opérations sur les chaînes, vous pouvez générer des styles de manière plus flexible.
Exemple de liste
1$states: "hover", "focus", "active";
2
3@each $state in $states {
4 .btn-#{$state} {
5 content: "Button in " + $state + " state";
6 }
7}Résultat compilé
1.btn-hover {
2 content: "Button in hover state";
3}
4.btn-focus {
5 content: "Button in focus state";
6}
7.btn-active {
8 content: "Button in active state";
9}- Ce code est un exemple d’utilisation de la directive
@eachdans SASS pour générer des classes pour chaque état d’une liste et définir dynamiquement le contenu par concaténation de chaînes.
Exemple de map
1$colors: (
2 "primary": "#3498db",
3 "secondary": "#2ecc71"
4);
5
6@each $name, $color in $colors {
7 .text-#{$name} {
8 color: $color;
9 }
10}Résultat compilé
1.text-primary {
2 color: #3498db;
3}
4.text-secondary {
5 color: #2ecc71;
6}- Ce code est un exemple d’utilisation d’une map SASS pour associer des noms de couleurs à des valeurs et générer chaque classe dynamiquement avec la directive
@each.
Échappement des chaînes
Afin d’utiliser en toute sécurité certaines chaînes comme identifiants CSS, un échappement peut être nécessaire.
1$special_character: "example\\@123";
2.#{$special_character} {
3 content: "This is a valid CSS class.";
4}Résultat compilé
1.example\@123 {
2 content: "This is a valid CSS class.";
3}- Ce code est un exemple de la façon de traiter une chaîne contenant des caractères spéciaux comme une variable en SASS, de l'étendre avec
#{$variable}et de l'utiliser comme nom de classe valide en CSS.
Conclusion
Les opérations sur les chaînes dans SASS vont bien au-delà de simples littéraux : ce sont de puissants outils pour construire des styles dynamiquement. En utilisant les opérations et fonctions de base présentées ici, vous pouvez améliorer la réutilisabilité et la maintenabilité de votre CSS et concevoir des styles plus efficacement.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.