Sass

Explorer les fonctions de manipulation de couleur, de texte, etc.

Exploration des fonctions de manipulation en SASS


1. Manipulation de couleurs :


  • SASS propose un ensemble de fonctions intégrées pour manipuler les couleurs. Vous pouvez ajuster la luminosité, la saturation, la transparence, etc. Par exemple :


$primary-color: #007bff;
$lighter-primary-color: lighten($primary-color, 20%);
$darker-primary-color: darken($primary-color, 20%);


2. Manipulation de texte :


  • En SASS, vous pouvez également manipuler du texte en utilisant des fonctions intégrées telles que upper-case(), lower-case(), capitalize(), etc. Par exemple :


.title {
    text-transform: uppercase;
}

.paragraph {
    text-transform: capitalize;
}


3. Fonctions d'interpolation :


  • Les fonctions d'interpolation en SASS vous permettent d'insérer des variables ou des expressions dans des chaînes de caractères. Par exemple :


$property: color;
$value: #007bff;

.element {
    #{$property}: $value;
}


4. Fonctions de chaîne de caractères :


  • SASS propose également des fonctions pour manipuler les chaînes de caractères, telles que str-length(), str-insert(), str-slice(), etc. Par exemple :


$str: "Hello, world!";
$length: str-length($str); // Renvoie 13


5. Fonctions de liste :


  • Les fonctions de liste en SASS vous permettent de manipuler des listes de valeurs, telles que length(), nth(), join(), etc. Par exemple :


$list: (1, 2, 3, 4, 5); 
$length: length($list); // Renvoie 5


6. Fonctions mathématiques :


  • Outre les opérations mathématiques de base, SASS propose des fonctions mathématiques telles que abs(), ceil(), floor(), max(), min(), etc. Par exemple :


$value: -10;
$absolute: abs($value); // Renvoie 10


7. Fonctions de comparaison :


  • SASS propose des fonctions de comparaison telles que percentage(), unit(), unitless(), etc. Par exemple :


$value: 50px;
$percentage: percentage($value); // Renvoie 5000%


Conclusion


En explorant les fonctions intégrées de manipulation en SASS, vous pouvez ajouter une puissance supplémentaire à vos styles en manipulant les couleurs, le texte, les chaînes de caractères, les listes, les valeurs mathématiques, etc. Cela vous permet de créer des styles plus dynamiques et adaptatifs tout en simplifiant votre processus de développement.

1512 vues
Modifié le 21 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
317 vues
Lien externe de feuilles de style CSS avec l'élément <link>
Lien externe de feuilles de style CSS avec l'élément <link>L'élément <link> est utilisé dans une page HTML pour lier une feuille de style CSS externe. Cela permet de séparer le...
HTML
212 vues
Opérateurs arithmétiques, logiques et de comparaison
Opérateurs en JavaScript1. Opérateurs Arithmétiques :Les opérateurs arithmétiques sont utilisés pour effectuer des opérations mathématiques sur des valeurs numériques.Addition (+) : Ajoute...
JS
4 158 vues
Ajout d'images avec <img> et attributs src, alt et width
Ajout d'images avec <img> et attributs src, alt et widthLa balise <img> est utilisée pour afficher des images dans une page HTML. Elle nécessite l'utilisation de certains attributs pour...
HTML
16 977 vues
Créer un profil PHP
Après avoir créé notre page de connexion et notre page d'inscription il est temps de créer un profil pour votre utilisateur !La page profil permettra plusieurs choses ! D'éditer ses informations...
Créer son site
1 923 vues
Voir son profil en PHP
Maintenant que vous savez comment voir le profil d'un membre du site nous allons apprendre à concevoir notre profil !
Créer son site de rencontres
258 vues
Structures de contrôle : if, else if, else, switch
Structures de Contrôle en JavaScript1. Structure de Contrôle if :La structure de contrôle if permet d'exécuter des blocs de code conditionnellement, en fonction de l'évaluation d'une expression...
JS
4 134 vues
Créer sa première page
Attention ! ⚠️ À partir de ce cours je ne détaillerais plus comme le cours précédent.À la place il sera expliqué ce que la vidéo va vous apporter et .. comme toujours le code sera...
Créer son site de rencontres
3 176 vues
Explorer les avantages de la séparation des préoccupations
Explorer les avantages de la séparation des préoccupationsLa séparation des préoccupations est un principe de conception qui consiste à diviser un système en différentes parties qui se...
CSS
Publicité
Cette pub permet au site de vivre ...