Si vous êtes de nouveau la lecture de ce que signifie probablement que vous êtes familier avec les CSS et ont entendu parler de SCSS ou Sass, mais qui n’ont pas encore pris la plongée.,
eh Bien bonne nouvelle. Sass va rendre votre vie beaucoup mieux. Vous pourrez enfin sécher (ne vous répétez pas) votre code en CSS.
fondamentalement, CSS manque de fonctionnalités intéressantes qui aideraient à le transformer en un outil plus facile à utiliser et à lire. Sass ajoute des Variables, des imbrications, des partiels, des Mixins, des extensions/héritages et des opérateurs. Certaines d’entre elles sont des choses que les langages de programmation ont tendance à avoir., Si vous ne savez pas ce que sont certains d’entre eux, ce n’est pas grave. Nous allons définir chacun de ces éléments et vous montrer comment ils peuvent être utilisés.
un Sass peut être compilé dans un fichier CSS, ce qui facilite l’écriture de nombreux fichiers.
Si vous utilisez l’application create react, vous avez de la chance car la partie traitement est déjà prise en charge pour vous. Sinon, vous pouvez utiliser Grunt ou Gulp pour traiter vos fichiers SASS/SCSS en CSS. Si vous n’êtes pas encore dans un environnement qui le fera, je suggère de le configurer en premier. Cet article est de parler des caractéristiques de Sass et comment les utiliser.,
quelle est la différence entre Sass et SCSS. Eh bien, les deux peuvent être compilés en CSS. La vraie différence est dans la syntaxe. SCSS utilise principalement la même syntaxe que CSS tandis que Sass supprime les accolades et les demi-deux-points. Dans les deux cas, vous pouvez utiliser les fonctionnalités supplémentaires fournies par Sass.
ce qui suit montre les différences syntaxiques.
Si vous utilisez un langage de codage, vous savez ce qu’est une variable. Donc je n’irai pas trop en profondeur avec ça. Essentiellement, Sass vous permet enfin de définir des variables de sorte que si vous décidez de changer une couleur, vous n’avez pas à la changer 1000 fois., Vous pouvez simplement changer votre variable de couleur primaire en un seul endroit et vous êtes prêt à partir
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
imbrication
en CSS, vous ne pouvez pas imbriquer. Jetons un coup d’oeil à ces deux sélecteurs. Il n’y a rien de terriblement mal à cela. Mais nous répétons le code.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Nous pouvons imbriquer dans Sass comme ceci. Cela semble beaucoup plus propre.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
partiels
Les partiels sont des fichiers Sass ou Scss qui ont un trait de soulignement à l’avant du nom de fichier. Exemple. « _test.scss”. À quoi ça sert?, Cela indique que ce fichier particulier ne doit pas être transformé en CSS le moment venu. Ces fichiers contiendront des extraits de CSS qui peuvent ensuite être importés par d’autres fichiers SCSS.
c’est un excellent moyen de modulariser votre CSS et de garder les choses plus faciles à maintenir. Par exemple, vous pouvez stocker des variables qui seront utilisées dans plusieurs fichiers. C’est la façon de le faire.
Mixins
les Mixins sont intéressants car ils ajoutent une fonctionnalité similaire au langage de codage. Vous reconnaîtrez immédiatement ce que je veux dire en voyant le code:
Au Lieu de taper « rotate(30deg)” 3 fois., Vous pouvez créer ce qui ressemble essentiellement à une fonction et agit en quelque sorte comme une. Vous passez la propriété au transform () mixin.
Pour utiliser ce morceau de code, vous devez utiliser le mot-clé « @include”.
Plus d’infos si vous cliquez ici.
Extend/l’Héritage & Opérateurs
je vais en parler dans la Partie 2 comme ils sont un peu plus impliqués. Ce sont quelques-unes des fonctionnalités les plus utiles de SCSS, alors veuillez suivre et je publierai ce blog la semaine prochaine!
suivez-moi sur Twitter @thedrewprint et trouvez-moi sur LinkedIn chez Andrew Richards., Merci pour la lecture!