Installer et préparer Sass pour la production

Article 5 sur 9 de la série: Comprendre et utiliser Sass

• Travailler sa maquette avec Sass et Susy

  Afin de mieux comprendre la mise en œuvre de tout ce que nous avons vu jusqu’à présent, y compris l’utilisation de Sass, nous allons déployer un véritable flux de travail en s’appuyant sur la mise en place d’un site.

• Premiers pas et premiers fichiers Sass

  Après avoir vu tous ces concepts qui gravitent autour de Sass, il est important de mettre à plat et d’établir nos premiers fichiers et nos premières lignes de code afin de mettre tout cela en activité.

• Comment répartir ses fichiers partials sous Sass

  SassScript va bien au-delà de l’utilisation simple de variables ou de mixin, nous allons explorer la mise en place d’un modèle assez complet pour concevoir notre développement de site ou d’application.

• Paramétrer Sass avec Compass

  Bien que la librairie Compass ne soit plus maintenue, nous allons explorer une approche qui l’utilise et nous permet de continuer à en profiter sans compromettre nos productions.

• Installer et préparer Sass pour la production

  Travailler sous Ruby nous apporte une véritable panoplie d’outils que nous avons sous la souris. Voyons comment installer ces différentes facettes qui peuvent nous être très utiles.

• Déployer Sass de manière efficace

  Depuis la démocratisation et l’utilisation des préprocesseurs, différents concepts, principalement basés sur la programmation orientée objet, ont émergés et nous permettent d’aborder Sass d’une manière très modulaire.

• Sass – La compilation et les outils disponibles

  Bien que Ruby soit une approche très ouverte et évolutive, il existe différentes façons de compiler Sass dans CSS, et chaune peut présenter ses intérêts et ses avantages.

• Qu’est ce que Sass – Introduction et présentation

  Qu’est-ce qu’un préprocesseur et ce qu’est Sass? Cet article présente les concepts de base et définis ce qu’on peut attendre d’une telle technologie.

• Comprendre et utiliser Sass

  Cette série ne couvre pas la syntaxe de Sass, mais examine comment utiliser Sass et des concepts qui nous permettent d’exploiter au mieux les possibilités offertes par Sass.

En s’appuyant sur les diverses approches définies durant les premiers articles, nous allons pouvoir mettre en place un flux de travail, et, en tirer quelques directives principales.

Reprenons ensemble, et pas à pas, l’ensemble des installations… Attention, si vous le souhaitez, vous pouvez n’installer que Sass et Compass afin de suivre cette série d’articles.

Compass

Compass, qui est souvent controversé, surtout depuis l’apparition de la gestion en post-processeur, du préfixage, ainsi que par d’autres auteurs comme Hugo Giraudel – Why I Don’t Use Compass Anymore.

Mais qui néanmoins apporte également de la souplesse au niveau de la gestion des projets et surtout au travers de son fameux fichier de configuration config.rb, nous l’installerons donc pour cette série de tests.

Revenir sur l’installation de Sass, Compass sous Ruby

En ce qui concerne l’illustration de cette série d’articles, nous travaillerons sous Ruby. Bien que lors du précédent article, au niveau du chapitre La compilation et les outils disponibles ; Sous Ruby, tout y est déjà été abordé, je vous propose de rapidement faire le tour ici et reprendre à zéro.

Sous Windows

1. Il faut s’assurer d’avoir Ruby Installer,
2. Une fois Ruby installé, depuis le menu démarrer, lancez Start Command Prompt with Ruby.
3. Nous utiliserons cette boite de commandes pour suivre et installer les divers outils nécessaires.

Sous MacOS

1. Ruby est présent par défaut.
2. Lancez le Terminal.
3. Il se peut que dans les commandes qui suivent, vous obteniez un message d’erreur de type « …ERROR : While executing gem … (Gem ::FilePermissionError) You don’t have write permissions for … ». Vous allez avoir besoin d’user de la commande sudo.

En fait, il suffit de faire précéder les commandes indiquées par la commande sudo.

Par exemple, si la commande est

gem install sass

Il faudra alors saisir

sudo gem install sass

Votre mot de passe administrateur, vous sera alors demandé, pour confirmer les processus d’installation

Password:

Saisissez-le (attention vous ne verrez pas le curseur bouger, c’est normal) et validez. Le cursus d’installation devrait alors se poursuivre normalement.

Quel que soit le système

Maintenant quel que soit votre système d’exploitation,

1 – Vérifiez si Sass est installé en tapant

sass –v

Si Sass n’est pas présent veuillez l’installer

gem install sass

2 – Vérifiez si Compass est installé en tapant

compass –v

Si Compass n’est pas présent veuillez l’installer

gem install compass

3 – Sass et Compass sont installés

Y-aurait-il des extensions incontournables ?

Parmi les extensions, ou librairies, y-en-aurait-il qui soient incontournables et quasi nécessaires à tout type de projet, et devant compléter Sass ?

La réponse ne peut pas, et ne doit pas, être ferme, immuable, et surtout exhaustive. Tout va dépendre des besoins de chacun et surtout des méthodes entreprises par chacun pour développer et aborder ses propres projets.

Faisons rapidement le tour des principaux plugins disponibles. (L’ensemble des installations qui suit n’est fournie qu’à titre d’illustration, pour un flux de travail plus global, est n’est pas forcément nécessaire pour la suite de cette série d’articles).

4 – Vérifiez si les extensions qui vont suivre sont déjà installées

gem list

La liste des gems déjà installés s’affiche dans votre palette de commande.

Susy

Susy est recommandé, si vous approchez le positionnement en mode grille. Ce plugin reste un indispensable outil à la hauteur de vos exigences des plus élevées.

Il est vrai que de primes abords, cela peut paraitre un peu usine à gaz, mais détrompez-vous, cela reste très simple d’utilisation et apporte suffisamment de capacités sous le capot afin de répondre à des mises en pages des plus complexes.

5 – Si susy n’est pas présent dans la liste, veuillez l’installer

gem install susy

Breakpoint

Breakpoint est un complément indispensable pour une gestion plus souple des points de ruptures entre chaque mode d’affichage. Cette extension souvent confondue avec certaines possibilités intégrées aux divers modes grilles reste réellement complémentaire et assouplie l’écriture des requêtes de médias.

6 – Si breakpoint n’est pas présent dans la liste, veuillez l’installer

gem install Breakpoint

Scut

Scut Tout est dit dans le nom même de cette librairie SCUT pour Sass-CSS Utilities, elle apporte un grand nombre de raccourcis et de simplification d’écriture de manière générale, et ce, aussi bien sur l’affichage que sur la typographie.

7 – Si scut n’est pas présent dans la liste, veuillez l’installer

gem install scut

Il se peut que lors de cette installation, vous receviez un message d’erreur de type « … ERROR : Could not find a valid gem … ». Pas d’inquiétude, par défaut Ruby ajoute automatiquement https://rubygems.org, mais pas la version non sécurisée.

Il est donc possible de le faire manuellement, en prenant le risque bien sûr de ne pas piocher sur un serveur sécurisé.

gem    sources --add http://rubygems.org/ 
Do you    want to add this insecure source ? [yn]

Vous devrez alors explicitement valider cet ajout, en confirmant par y ou en refusant en tapant n.

Typesettings

Typesettings est un plugin qui permet de gérer la typographie de manière quasi intuitive, en respectant les ratios en fonction du modèle de périphérique, et, en apportant un vertical rythm intégré.

Simple d’utilisation, cette librairie devient indispensable à qui veut travailler le texte aussi bien que la mise en page.

À la différence des autres plugins, il faudra cloner le github au moment de l’importation. Nous verrons donc cela plus tard au moment de la configuration.

https://github.com/ianrose/typesettings.git

Normalize

normalize-scss ou compass-normalize… Avant toute intervention sur les CSS, il est toujours fortement recommandé de s’assurer de la remise à zéro des valeurs par défaut d’interprétation pour chaque navigateur.

Vous avez le choix de deux gems, sachant que le second n’a pas été mis à jour depuis près de 6 ans, et que Necolas vous propose une alternative sous Node, Normalize.css –  A modern, HTML5-ready alternative to CSS resets.

Dans ce flux de travail, nous optons pour le premier gem proposé.

8 – Si normalize-scss n’est pas présent dans la liste, veuillez l’installer

gem    install normalize-scss

Et plus…

Si vous travaillez sous Ruby, n’hésitez pas à vous rendre sur la plateforme d’hébergement, RubyGems, de la communauté Ruby, pour y trouver les divers gems à disposition, et, éventuellement compléter votre environnement de travail en fonction de vos besoins propres.

9 – refaites rapidement une vérification des gems qui sont installés dans votre environnement

gem list