L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Mixins dans Sass
Que sont les mixins et comment les utilisez-vous dans Sass ? Jetons un coup d'œil et utilisons quelques exemples pour que vous puissiez suivre.
Sass signifie Syntactically Awesome Style Sheets, et c'est une extension de CSS qui vous permet d'utiliser des choses comme des variables, des règles imbriquées, des importations en ligne et plus encore. Cela aide également à garder les choses organisées et vous permet de créer des feuilles de style plus rapidement. Il est autoproclamé comme le langage d'extension CSS de qualité professionnelle le plus mature, stable et puissant. Il s'agit essentiellement de CSS sous stéroïdes. Une analogie proche serait que Sass est à CSS ce que TypeScript est à JavaScript.
Ce que vous apprendrez
Cet article est une introduction à l'utilisation des mixins dans Sass et pourquoi ils sont importants. Il couvrira la syntaxe et la façon dont les paramètres sont construits, le tout avec des exemples clairement définis que vous pouvez suivre par vous-même. (Au cas où vous seriez intéressé, j'ai également écrit un article connexe présentant les mixins dans TypeScript.)
Prérequis
Pour suivre correctement et apprendre de cet article, vous aurez besoin des éléments suivants choses prêtes sur votre ordinateur :
- Un environnement de développement intégré (IDE). Je recommande Visual Studio Code car c'est ce que j'utiliserai tout au long de cet article.
- Ouvrez votre code VS et cliquez sur l'onglet extension.
- Recherchez et installez le compilateur Live Sass. Il compte actuellement plus de 600 000 téléchargements au moment de la rédaction de cet article. Après l'avoir installé, vous devriez voir un bouton « Watch Sass » en bas de votre code VS.
- Téléchargez également l'extension de serveur en direct.
- Créez un nouveau dossier à l'emplacement de votre choix, puis ouvrez-le dans votre IDE.
Cet article est écrit pour tous les développeurs de tout niveau de connaissance, y compris les débutants.
Mixins in Sass
Mixins in Sass sont une fonctionnalité qui vous permet de réutiliser des styles dans les règles de modèle. Ils ont été faits pour éclaircir le chemin de l'évitement de l'utilisation de classes qui ne sont pas sémantiques, comme float. HTML a fait des changements considérables dans le sens d'être plus sémantique avec des balises comme section et aparté et même des articles mettant l'accent sur le sens plutôt que sur la mise en page. CSS n'a pas encore atteint ce niveau d'être totalement sémantique, et c'est là que Sass entre en jeu avec les mixins. un nouveau fichier. Appelez-le index.html, où résidera notre code de présentation. Copiez le code ci-dessous dans le fichier HTML.
<html>
<head>
<meta charset=[19659018]'utf-8'>
<meta http-equiv='X-UA-Compatible ' content='IE=edge'>
<title>[19659036]Page de test</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div class="container">
<h1>Page de test</h1>
<p>Cette page teste juste les Mixins dans
Sass avec un exemple sympa</p>
<div class="content"></div >
<div class="content"></div >
<div class="content"></div >
<div class="content"></div >
<div class="content"></div >
<div class="content"></div >
</div>
</body>
</html>
Pour l'instant, il n'y a pas de feuille de style liée à cette présentation. Créez un nouveau dossier appelé styles et créez un nouveau fichier à l'intérieur appelé styles.scss et copiez-y les règles ci-dessous :
body{
background-color: gainsboro;
}
.conteneur{
margin: 30px;
}
.contenu{[19659117]hauteur: 100px;
largeur: 140px;
fond: rouge indien ;
display: inline-block;
}
Parce que HTML ne comprend pas SCSS, il doit être compilé en CSS, et c'est pourquoi nous avons installé l'extension du compilateur en direct dans VS Code afin que nous n'ayons pas à faire de gros travaux. Si vous cliquez sur le bouton « Watch Sass », vous verrez qu'il compile et génère un nouveau fichier appelé styles.css. Vous pouvez maintenant lier le CSS à votre code HTML et le laisser ressembler à ceci :
<html >
<head>
<meta charset='utf-8'[19659018]>
<meta http-equiv='X-UA-Compatible' contenu=[19659018]'IE=edge'>
<title>Page de test</title>[19659021]<meta name='viewport' content='width=device-width , initial-scale=1'>
<link rel='stylesheet'[19659022]tapez=[19659018]'text/css' media='screen' href= '/styles/styles.css'>
</head>
<body>
< div class="conteneur">
<h1>Page de test</h1>
<p>Cette page teste juste les Mixins dans
Sass avec un exemple sympa</p>
<div class="content"></div >
<div class="content"></div >
<div class="content"></div >
<div class="content"></div >
<div class="content"></div >
<div class="content"></div >
</div>
</body>
</html>
Ceci est un exemple de cas d'utilisation, mais imaginez que cette page HTML était une grande application d'une seule page et que ces six div avaient leurs propres classes, mais vous vouliez toujours qu'ils partagent certains styles entre eux. Vous pouvez y parvenir en CSS de deux manières. La première consiste à reproduire les styles. Pour le montrer, remplacez les six divs de votre code HTML par ceux ci-dessous :
<div class="content1"></div>
<div class="content2"></ div>
<div class="content3">< /div>
<div class="content4"> </div>
<div class="content5">[19659037]</div>
<div class="content6">[19659037]</div>
Pour appliquer les mêmes règles à différentes classes, modifiez le fichier style.scss pour qu'il ressemble à ceci :
body{
background-color: gainsboro;[19659119]}
.container{
margin: 30px;
}
.content1{
hauteur[19659018]: 100px;
largeur: 140px;
fond: rouge indien ;
display: inline-block;
}
.content2{
height: 100px;
largeur: 140px;
fond: indianred;
affichage: en ligne -block;
}
.content3{
height: 100px;
width[19659018]: 140px;
background: indianred;
display: inline-block;[19659119]}
.contenu4{
hauteur: 100px;
largeur: 140px;
background: indianred;
display: inline-block;
}
.content5{[19659117]hauteur: 100px;
largeur: 140px;
fond: indianred;
display: inline-block;
}
.content6{
height: 100px;
largeur: 140px;
fond: indianred;
affichage[19659018]: inline-block;
}
Si vous cliquez sur le bouton « Go Live » dans le pied de page de VS Code, un serveur distant hébergera le fichier HTML dans votre navigateur, et le Le résultat ressemblera à ceci :
Le problème
Le problème avec cette méthode est que lorsque vous regardez les règles, vous pouvez voir que le même bloc de code est répété plusieurs fois. C'est inefficace et c'est l'une des raisons pour lesquelles les mixins existent dans Sass. Les mixins vous permettent de définir des styles à un seul endroit, puis de les réutiliser facilement.
La syntaxe des mixin est généralement la suivante :
@mixin
{
}
Où name est le nom du mixin et les règles sont la définition des règles CSS à réutiliser. Après avoir défini un mixin, vous utilisez le mot-clé include comme celui-ci pour l'appliquer :
{
@include ;
}
Donc, en appliquant ceci à notre cas d'utilisation ci-dessus, votre fichier styles.scss ressemblera maintenant à ceci :
body{[19659117]background-color: gainsboro;
}
.container{
margin: 30px;[19659119]}
@mixin contenu{
hauteur: 100px;
largeur: 140px;
background: indianred;
display: inline-block;
}
.content1[19659018]{
@include content();
}
.content2{
@include content( );
}
.content3{
@include content();
}
. inconvénient tent4{
@include content();
}
.content5{
@include content[19659018]();
}
.content6{
@include content();
}[19659139]Si vous jetez un œil à votre navigateur, vous verrez que cela donne le même résultat que la première méthode. La différence est qu'avec les mixins, vous pouvez facilement réutiliser les règles et ne pas vous répéter, adhérant ainsi au principe DRY et étant efficace. leur syntaxe et comment ils peuvent être utilisés dans votre flux de travail à l'avenir. Cela met également en évidence les avantages d'efficacité qui viennent avec les mixins. Bon piratage.Source link