Premiers pas avec Sass – Apprendre les bases et son installation

Peut-être avez-vous déjà entendu parler de Sass (Syntaxically Awesome StyleSheets) et cela vous intéresse, mais vous n'avez pas d'idée sur la façon de le configurer ou de l'incorporer dans votre projet. Dans sa forme la plus élémentaire, Sass est connu sous le nom de processeur CCS, ce qui permet à l'écriture CCS de devenir plus efficace et plus rapide. Nous passerons en revue les bases et les installations de Sass pour Mac et Windows.

L'apprentissage de base sur Sass

Il existe quelques courbes d'apprentissage en ce qui concerne l'utilisation et la configuration de Sass. Pour pouvoir avancer dans le projet Sass, vous devez avoir au moins des connaissances de base en HTML et CSS. Vous devez maîtriser ou maîtriser le CSS avant d'essayer d'apprendre le processeur CSS, qui est le Sass.

Si vous avez déjà changé les couleurs de votre feuille de style beaucoup de temps ou si vous souhaitiez qu'il existe une meilleure solution, ou si votre feuille de style était déjà recouverte des préfixes du fournisseur, ou si vous aviez remarqué que vos feuilles de style étaient plus longues et difficiles à maintenir, peut-être ces raisons étaient suffisants pour proposer d'étudier Sass. Je vais résumer quelques termes permettant de comprendre les bases de Sass.

• Variable – c'est un conteneur de stockage pour les valeurs CSS comme les nombres et les couleurs. La syntaxe a été écrite comme « $variable ». Ce code peut être utilisé dans toute la feuille de style après l'avoir défini.
• Nidification – il réduit la répétition dans le code et a la capacité de rendre l’écriture CSS plus facile et plus rapide.
• Partiels – ce sont les fichiers CSS commençant par le trait de soulignement « _partial.scss » et ils ne sont pas compilés sur leurs propres fichiers CSS mais importés dans le fichier principal.
• Importer – utilisez « @import » afin de compiler tous les partiels dans un seul fichier.
• Mixins – utilisez « @mixin » pour le CSS répétitif, comme lorsque les préfixes du fournisseur étaient requis.
• Étendre – utilisez « @extend » afin de modifier quelques aspects de la clé d'éléments par ailleurs de même identité, comme par exemple un groupe de boutons ayant des couleurs différentes.
• Les opérateurs – cela permet à l'utilisateur d'utiliser des calculs mathématiques dans le CSS, comme définir la largeur des différentes parties des mises en page.

Installer Sass sous Mac et Windows

Sass fonctionne sur le langage de programmation Ruby, Ruby doit donc être installé sur votre ordinateur. Pour les utilisateurs Mac, Ruby est déjà préinstallé sur OSX. Vérifiez que vous utilisez une version mise à jour en tapant « ruby – v ». Si le nombre est inférieur à 2.0.0, tapez « do gem install ruby » pour mettre à jour. Vous pouvez maintenant commencer à installer Sass.

Cependant, sous Windows, l’installation est un peu plus délicate car aucun Ruby n’est installé. Si vous exécutez une version 64 bits de Windows 7, choisissez Ruby 2.1.7 (x54). La même chose doit également être faite pour Windows 8 et 10. Assurez-vous de choisir « Ajouter l'exécutable Ruby dans votre PATH », puis continuez. Une fois Ruby installé, ouvrez l'invite de commande, puis confirmez que Ruby a été installé. Ensuite, vous pouvez installer Sass en tapant «gem installer sass» et vous êtes prêt.

RailsCarma travaille sur le framework Ruby on Rails depuis ses débuts et a géré plus de 250 projets RoR. Consultez notre portefeuille comprendre comment nous contribuons à changer la forme de l'industrie du logiciel en fournissant Développeur Ruby on Rails. Contactez-nous dès maintenant !