Les fonctions simplifient considérablement votre expérience de programmation, et cela est également vrai lorsque vous écrivez du code CSS.
Less CSS est un préprocesseur CSS robuste et dynamique qui a suscité une attention et une popularité considérables ces dernières années. En tant que préprocesseur, il sert d'extension de "Vanilla CSS", le langage de style CSS traditionnel utilisé dans le web. développement, en fournissant un éventail de caractéristiques et de fonctionnalités supplémentaires qui améliorent le style général expérience.
Si vous maîtrisez bien l'écriture de CSS standard, vous pouvez passer en toute transparence à l'utilisation de Moins de CSS sans courbe d'apprentissage abrupte. Cette compatibilité facilite la maintenance de vos connaissances CSS existantes tout en tirant parti des fonctionnalités avancées de Less.
Que sont les fonctions et pourquoi sont-elles importantes?
En programmation, une fonction est un bloc de code qui exécute une tâche spécifique. Vous pouvez également le réutiliser ailleurs dans le programme. Les fonctions prennent généralement des données, les traitent et renvoient les résultats.
Ils facilitent la réduction du code en double dans un programme. Par exemple, supposons que vous disposiez d'un programme qui calcule la remise en fonction du prix saisi par l'utilisateur. Dans un langage comme JavaScript, vous pouvez l'implémenter comme ceci :
fonctioncheckDiscount(prix, seuil){
si (prix >= seuil){
laisser remise = 5/100 * prix;
retour`Votre réduction est de $${réduction}`;
} autre {
retour`Désolé, cet article ne donne pas droit à une remise. `
}
}
Ensuite, vous pouvez appeler la fonction et passer le prix et le seuil.
laisser prix = invite("Entrez le prix de l'article: ")
alerte (checkDiscount (prix, 500))
En supprimant la logique de vérification des remises, le programme est non seulement lisible, mais vous disposez maintenant d'un bloc de code réutilisable qui traite la remise et renvoie le résultat. Il y a beaucoup plus que les fonctions peuvent faire, mais ce ne sont que les bases.
Comprendre les fonctions en moins de CSS
Dans le CSS traditionnel, un ensemble très limité de fonctions est disponible pour vous en tant que développeur. L'une des fonctions les plus populaires de CSS est la fonction mathématique calc() qui fait exactement ce qu'il semble - il effectue des calculs et utilise le résultat comme valeur de propriété dans CSS.
p{
Couleur de l'arrière plan: rouge;
largeur: calc(13pixels- 4pixels);
}
Dans Less CSS, il existe plusieurs fonctions qui font plus que de simples opérations arithmétiques. Une fonction que vous pouvez rencontrer dans Less est la si fonction. Le si La fonction prend trois paramètres: une condition et deux valeurs. Le bloc de code ci-dessous montre comment vous pouvez utiliser cette fonction :
@largeur: 10px;
@hauteur: 20px;
div{
marge:si((@largeur > @hauteur), 10px, 20px)
}
Dans le bloc de code ci-dessus, le compilateur Less vérifie si la variable largeur (défini par le @ symbole) est supérieur à la variable hauteur. Si la condition est vraie, la fonction renvoie la première valeur après la condition (10px). Sinon, la fonction renvoie la deuxième valeur (20px).
Après la compilation, la sortie CSS devrait ressembler à ceci :
div {
marge: 20pixels;
}
Comment utiliser un booléen en moins
Un booléen est une variable qui a deux valeurs possibles: vrai ou FAUX. Avec le booléen() fonction dans Less, vous pouvez stocker la valeur vraie ou fausse d'une expression dans une variable pour une utilisation ultérieure. Voici comment cela fonctionne.
@text-color: rouge;
@bg-color: booléen(@text-color = rouge);
Dans le bloc de code ci-dessus, le compilateur Less vérifie si couleur du texte est rouge. Puis le bg-couleur variable stocke la valeur.
div{
Couleur de l'arrière plan: si(@bg-color,vert jaune);
}
Le bloc de code ci-dessus se compile en quelque chose comme ceci :
div {
Couleur de l'arrière plan: vert;
}
Remplacement de texte dans une chaîne avec la fonction replace ()
La syntaxe pour le remplacer() la fonction ressemble à ceci :
remplacer(chaîne, modèle, remplacement, drapeaux)
chaîne représente la chaîne dans laquelle vous souhaitez rechercher et remplacer. modèle est la chaîne à rechercher. modèle peut également être une expression régulière, mais il s'agit généralement d'une chaîne. Après une correspondance réussie, le compilateur Less CSS remplace modèle avec le remplacement.
En option, le remplacer() fonction peut également contenir la drapeaux paramètre pour les indicateurs d'expression régulière.
@chaîne: "Bonjour";
@modèle: "bonjour";
@remplacement: "je";
div::avant{
contenu: remplacer(@chaîne,@modèle,@remplacement)
}
Le bloc de code ci-dessus devrait aboutir à ce qui suit après compilation :
div::avant {
contenu: "Salut";
}
Fonctions de liste en moins de CSS
Dans Less CSS, vous utilisez des virgules ou des espaces pour définir une liste de valeurs. Par exemple:
@épiceries: "pain", "banane", "pomme de terre", "lait";
Vous pouvez utiliser le longueur() fonction pour évaluer le nombre d'éléments dans la liste.
@résultat: longueur(@épicerie);
Vous pouvez également utiliser le extrait() fonction pour extraire la valeur à une position particulière. Par exemple, si vous souhaitez obtenir le troisième élément de la épiceries liste, vous procédez comme suit :
@troisième-élément: extrait(@épicerie, 3);
Contrairement aux langages de programmation classiques où l'index de liste commence à 0, l'index de début d'une liste dans Less CSS est toujours 1.
Une autre fonction de liste qui pourrait être utile lors de la création de sites Web avec moins est la gamme() fonction. Il prend en compte trois paramètres. Le premier paramètre spécifie la position de départ dans la plage. Le deuxième paramètre indique la position finale et le dernier paramètre spécifie la valeur d'incrémentation ou de décrémentation entre chaque élément de la plage. S'il n'est pas fourni, la valeur par défaut est 1.
div {
marge: plage (10px, 40px, 10) ;
}
Le bloc de code ci-dessus doit être compilé comme suit :
div {
marge: 10px 20px 30px 40px ;
}Comme vous pouvez le voir, le compilateur Less CSS commence à partir de 10px, augmentant la valeur précédente de 10, jusqu'à ce qu'il atteigne la position finale (40px).
Construire un site Web simple avec moins de fonctions CSS
Il est temps de rassembler tout ce que vous avez appris et de créer un projet simple avec moins de CSS. Créez un dossier et ajoutez index.htm et sans style des dossiers.
Ouvrez le index.htm fichier et ajoutez le code HTML suivant.
html>
<htmllangue="fr">
<diriger>
<métajeu de caractères="UTF-8">
<métanom="fenêtre"contenu="width=device-width, initial-scale=1.0">
<lienrel="feuille de style/moins"taper="texte/css"href="sans style" />
<titre>Documenttitre>
diriger>
<corps>
<divclasse="récipient">
<h1>
h1>
div>
<scénariosrc=" https://cdn.jsdelivr.net/npm/less" >scénario>
corps>
html>
Dans le bloc de code ci-dessus, il y a un parent "récipient"div avec un vide h1 élément. Le src attribut sur le scénario balise pointe vers le chemin d'accès au compilateur Less CSS.
Sans cela scénario tag, le navigateur ne pourra pas comprendre votre code. Alternativement, vous pouvez installer Less CSS sur votre ordinateur via Gestionnaire de paquets de nœuds (NPM), en exécutant la commande suivante dans le terminal :
npm install -g moins
Dès que vous êtes prêt à compiler le .moins fichier, exécutez simplement la commande ci-dessous, en vous assurant de spécifier le fichier dans lequel le compilateur doit écrire la sortie.
moinsc style.moins style.css
Dans le sans style fichier, créez deux variables à savoir: largeur du conteneur et conteneur-bg-couleur pour représenter la largeur et la couleur de fond du "récipient"div respectivement.
@container-width: 50 rem;
@container-bg-color: jaune;
Ensuite, créez trois variables à savoir: chaîne, modèle, et remplacement. Ensuite, ajoutez les styles pour le "récipient"div et le h1 élément.
@chaîne: "Bonjour des enfants de la planète Terre !";
@modèle: "enfants de la planète Terre!";
@remplacement: "habitants de Pluton!";.récipient{
largeur: @container-width;
Couleur de l'arrière plan: @container-bg-color;
rembourrage: si(@container-width > 30 rem, gamme(20px, 80px, 20),"");
frontière: solide;
}
h1:premier enfant::après{
contenu: remplacer(@chaîne,@modèle,@remplacement);
}
Dans le bloc de code ci-dessus, le gamme() fonction définit le rembourrage propriété sur le "récipient"div. Le compilateur Less doit compiler sans style fichier dans ce qui suit :
.récipient {
largeur: 50rem;
Couleur de l'arrière plan: jaune;
rembourrage: 20pixels 40pixels 60pixels 80pixels;
frontière: solide;
}
h1:premier enfant::après {
contenu: "BonjourdepuislehabitantsdePluton!";
}
Lorsque vous ouvrez le index.htm fichier dans le navigateur, voici ce que vous devriez voir :
Améliorez votre productivité avec les préprocesseurs CSS
Dans les langages de programmation classiques, les fonctions réduisent la quantité de code dont vous avez besoin pour écrire et minimisent les erreurs. Les préprocesseurs CSS comme Less offrent plusieurs fonctionnalités qui facilitent l'écriture de code CSS.
Les préprocesseurs CSS sont pratiques lorsque vous travaillez avec des fichiers volumineux. Ils facilitent le débogage des problèmes, améliorant ainsi la productivité du développeur.
