Salut à toi très cher MMI ! Aujourd’hui, j’ai le plaisir de te présenter cette mini série d’articles, j’ai nommé « Booste ton Workflow ».

L’objectif est simple : Te présenter les outils d’aujourd’hui et de demain qui vont faire de toi une bête du front. Ma mission ? Faire de toi un intégrateur d’enfer que tout le monde voudra s’arracher. Tu intègreras les maquettes plus vite que ton ombre, sans relâche tu ne CSSras jamais avant d’être satisfait. Et on conclut cette introduction sur une punchline, ladies and gentlemen..

SASS (Syntactically Awesome Style Sheets)

Le sujet du jour, c’est le CSS, et plus particulièrement son évolution. Si tu ne connais pas encore SASS, prépare-toi à ré-apprendre à vivre. Le CSS d’aujourd’hui possède des limites, c’est la raison pour laquelle des gens ont construit ce que l’on appelle des pré-processeurs du langage CSS. Pour faire simple, ce sont des extensions du langage CSS. Comme si on venait y greffer tout un set de fonctions supplémentaires, user made. Pour le coup, SASS est développé sur le langage Ruby. Un pré-processeur signifie également qu’il y a un processus de compilation, entre le code d’entrée (donc le SASS), et le code de sortie, qui ici sera du CSS. En fait, tu écris tout ton code bourré de fonctions en plus, et le compilateur de SASS s’occupe tout seul de traduire tout ça en CSS tout à fait normal, pour que tu puisses l’utiliser n’importe où après. C’est top nan ?

Pour Windows

  1. Il faut commencer par installer Ruby. Pour ça, le plus simple c’est Ruby Installer : Télécharge la dernière version adéquate dans la partie RubyInstaller.
  2. Tu peux ensuite l’installer. Normalement aucun redémarrage n’est requis.
  3. Après l’installation, tu devrais pouvoir trouver un fichier exécutable (.exe) du nom de « Start command prompt with Ruby » fraîchement installé. Exécute ça en tant qu’administrateur.
  4. Un outil de ligne de commande (non, ne prends pas peur promis ça n’est pas difficile !) s’ouvre alors. Ruby utilise un système de gestion de packages appelé « gem ». Considère tous les petits packages comme des gems que tu dois installer pour pouvoir les faire fonctionner sur ton système. Eh bien SASS se trouve être une gem ! Pour installer une gem il te suffit de taper ça dans ton terminal :
    gem install sass
  5. Tu peux maintenant suivre la suite de cette introduction ! ;)

Pour Mac OS

  1. Sur mac, c’est relativement simple. En fait, OSX comporte une installation de ruby par défaut. Du coup, tu n’as rien d’autre à faire que d’ouvrir l’application Terminal et d’y taper la commande sudo gem install sass
    Pourquoi sudo me demanderas-tu ? Parce que l’installation d’une gem représente une modification du système pour Mac OS, du coup il est nécessaire que tu prouves que tu as bien les droits d’administration ! Tu te verras demandé ton mot de passe, entre le simplement et l’installation se fera !

Si tout va bien, tu es prêt pour te lancer dans SASS !

Faire fonctionner SASS

Pour faire fonctionner SASS on va avoir besoin de deux choses :

  • Un invité de commande ou terminal (le même que celui utilisé pour l’install si tu es sur Windows)
  • Un projet de test

Très rapidement, je vais faire une structure très basique telle que :

Capture d’ecran 2015-05-12 à 23.38.35

 

Note que j’ai deux dossiers distincts pour mon sass (ou scss) et mon css. Dans mon dossier css, je n’ai absolument rien. En revanche, dans mon dossier scss j’ai un fichier style.scss qui sera mon fichier à faire compiler par SASS.

Il faut ensuite naviguer jusqu’à ce dossier grâce à ton terminal ou ton invité de commande. Sur Mac comme sur PC, tu peux faire ça avec la commande cd. Sur Mac OS, tu peux aussi faire glisser un dossier dans ton terminal pour obtenir instantanément le chemin complet. Sur Windows, je ne vais pas réinventer la roue. (On me souffle dans l’oreillette qu’on peut également glisser un dossier dans la prompt de Windows !)

Ça y est tu es dans ton dossier ? OUF. Il faut maintenant utiliser SASS pour surveiller les changements que tu fais sur ton fichier scss afin qu’il le compile automatiquement en css. Une simple commande suffit : sass --watch scss:css (2 tirets devant watch)

Maintenant, dès que tu sauvegarderas ton fichier scss, il sera compilé dans le dossier css.

Apprendre SASS et le comprendre

SASS comporte BEAUCOUP d’avantages. Je ne prétends pas tous les connaître. En revanche, je sais que ceux dont je vais te parler ici me sont utiles littéralement tous les jours dans le métier d’intégrateur.

  • L’emploi de variables : Si tu as déjà fait du PHP, du Java, du Javascript, n’importe quel autre langage que le HTML ou le CSS, tu as pu constaté qu’ils ont tous un point commun : les variables. Elles se déclarent d’une manière très simple : $variable: valeur; Et ici, l’intérêt est le même qu’ailleurs, la ré-utilisabilité de ton code. Exemple simple et concret : Tu as un fichier de 2000 lignes de css dans lequel tu emploies au moins 40 fois la même couleur, ou plutôt un set de couleurs. Tu es content, tu as fini ton projet, mais voilà. Tu aimerais bien changer toutes les couleurs. Avant, tu devais chercher/remplacer, mais maintenant grâce aux variables, tu n’as qu’à changer le code couleur stocké dans ta variable (que tu as utilisé partout ailleurs), et tout va se changer tout seul, en quelques clics. Et ce n’est qu’un exemple minime de la puissance de SASS.

Capture d’ecran 2015-05-15 à 19.29.57

  • Le nesting : Si tu as lu mon article sur le workflow, tu sauras de quoi il s’agit. C’est un système qui permet d’appliquer le principe d’héritage au css. Au lieu d’écrire nav ul li, tu peux faire nav { ul { li {…} } }. Et tu peux écrire du code entre chaque niveau de l’arbo !
Capture d’ecran 2015-05-15 à 19.33.14
Le bout de code du haut se compile en ce que tu peux voir en dessous.
  • Les feuilles de style partiales : Ce point est un peu plus difficile à saisir. Mais en gros, tu peux inclure des fichiers SASS dans d’autres fichiers SASS, ce qui fait qu’on se rapproche beaucoup du principe de la programmation orientée objet dans le cas où une feuille de style SASS s’apparente à une classe. Si tu veux un bon exemple de ça, je te conseille de checker ce dossier et ce fichier de contrôle global qui correspond à l’arborescence SASS que j’utilise dans mon workflow quotidien à l’agence My Client is Rich.
Capture d’ecran 2015-05-15 à 19.35.16
Une arbo de fichiers tous dépendants (voir le lien github)
  • L’extension de classes : Un de mes petits favoris, toujours pour s’insérer dans des principes de programmation orientée objet. Si tu as déjà programmé de cette manière, tu seras probablement familier avec le principe d’extension : Disons que tu as une classe bouton sur laquelle tu as définit un tas de propriété esthétiques. Tu aimerais appliquer ce style à une div, mais pour une raison x ou y tu ne peux pas le faire en HTML(trop de classes tuent les classes les enfants). Avec SASS tu as juste à faire @extend .bouton pour appliquer le style de ta classe bouton à n’importe quel autre élément. C’est magique.
Que c'est beau.
Que c’est beau.
  • Les opérateurs : SASS te permet d’utiliser les opérateurs mathématiques. Et tu sais quoi ? SASS n’a presque rien à envier à la fonction calc native au CSS. Si ce n’est que SASS compile directement le résultat de ton calcul, et ne passe pas par une fonction partiellement supportée par les navigateurs. Le seul bémol, c’est que tu ne peux pas faire des calculs qui mêlent les % et les pixels ou autres unités avec SASS.
Ce bout de code me permet par exemple de convertir ma valeur pixel en valeur pourcentage.
Ce bout de code me permet par exemple de convertir ma valeur pixel en valeur pourcentage.
  • Les mixins : On parlait de variables, mais que serait un bon langage de programmation sans fonction ? Toujours dans le même esprit de ne pas avoir à te répéter (aussi appelé le principe du Dont Repeat Yourself). Le principe est simple : Une entrée, un algorithme, une sortie. Une application concrète de ça dans le CSS, c’est par exemple le préfixage : Toutes ces propriétés CSS auxquelles tu dois ajouter -moz--webkit--ms-, et j’en passe. Grâce aux mixins, tu peux remplacer tout ça par une unique ligne de code, pas plus longue que la propriété de base. C’est la FOLIE.
Capture d’ecran 2015-05-15 à 19.44.05
Ici tu peux voir l’emploi simultané de plusieurs fonctions. Et dans l’utilisation du mixin, tu peux utiliser autant de propriétés que tu veux. C’est génial non ?

Mais d’ailleurs, si les mixins c’est si simple à faire et si simple à réutiliser, il n’existerait pas des librairies de mixins toute faites ?

Bingo ! Je vais maintenant te parler de Compass, une librairie de mixins complètement dingue et complètement géniale qui te sauvera des heures de préfixage notamment.

Apprendre Compass

Installation

Pour installer Compass, rien de plus simple. Il te suffit de retourner sur ton terminal (ou ta Ruby Prompt sur Windows) et de taper gem install compass pour windows et sudo gem install compass sur Mac OS. Après quelques minutes au maximum, tu devrais être informé que la gem a bien été installée ! Une des premières choses à savoir avec Compass, c’est qu’il est fait pour compiler le SASS en même temps.

Tu n’as donc plus besoin d’utiliser sass --watch scss:css.

Cependant, pour que compass reconnaisse ton projet comme un projet Compass c’est un peu plus compliqué qu’avant (sans l’être vraiment à vrai dire !). Pour tes tests, je te conseille de créer un nouveau dossier de projet sans y créer des dossiers en particulier pour l’instant. Tu peux t’y rendre avec ton terminal (ou ta ruby prompt) et ainsi taper la commande suivante : compass create

Tu peux maintenant constater que Compass a créé une arborescence pour toi avec 2 dossiers : sass et stylesheets ainsi qu’un fichier « config.rb » qui correspond à la configuration de ton projet Compass. Si tu regardes dedans, tu verras qu’il y a deux lignes importantes : css_dir et sass_dir qui permettent de dire à Compass où sont les fichiers à compiler et où doit-il mettre les fichiers compilés.

Maintenant, tu peux ENFIN lancer l’écoute automatique de tes changements, et pour ça un simple compass watch suffira ! Tu peux faire un test en ouvrant un des fichiers du dossier sass et en le modifiant puis en sauvegardant, tu verras que ça compile tout seul. C’est pas beau la vie ?

Où trouver les mixins de Compass ?!

Alors, en ce qui concerne la liste des mixins de Compass, elle est extrêmement vaste. Mais ne t’en fais pas, il existe une documentation ! Tu peux la trouver iciDe manière générale, il existe un mixin pour à peu près tout ! Du coup, si tu es sur le point d’utiliser une propriété css qui requiert un préfixage, tu peux chercher cette propriété sur la doc de compass, et tu verras toutes les mixins qui y sont reliées ! Exemple, je cherche les transitions et tout en bas je vois qu’il existe une mixin « transition ». Il me suffit alors de faire un @include transition (mes parametres) dans mon code, et le tour est joué ! Si tu as un doute pour les paramètres, tu peux cliquer sur la mixin sur le site de Compass, et tu verras l’intégralité du code !

Compass et les sprites

Non, on ne parle pas de boisson dans cette partie, mais bien des sprites CSS. Si tu ne sais pas ce que sont les sprites, c’est tout simplement une technique qui consiste à regrouper toutes tes icônes ou petites images dans la même image, afin de n’avoir qu’une seule et unique requête à faire pour plusieurs images, c’est donc une mesure de performance. Le truc, c’est que pour faire des sprites, il faut d’abord regrouper toutes les images, puis avec ton css il faut créer une classe pour chaque image dans laquelle tu vas devoir assigner un background-image qui sera le même pour tous, et ensuite changer le background-position pour chaque icône. Mais t’imagine tout le boulot que c’est juste pour afficher des images ? On est d’accord. Compass peut s’en charger de manière complètement automatisée pour toi. Dingue non ? Il suffit que tu lui donne un dossier dans lequel tu mets toutes tes icônes (une image par icône), et il va s’occuper de créer l’image et le style associé ! Du coup, on est parti :

  1. Tu vas commencer par aller dans ton config.rb et vérifier la ligne images_dir qui représente le dossier où tu vas mettre tes images. A toi de changer si ce n’est pas bien configuré.
  2. Puis dans ton dossier d’images, tu vas créer un nouveau dossier, par exemple « sprites » ou « icons« , n’écrit pas un truc trop long tu verras plus tard pour quelle raison !
  3. Maintenant que tout est pré-configuré, il faut indiquer à Compass que tu veux qu’il s’occupe de tes sprites. Dans un fichier sass, tu peux écrire les lignes suivantes :

Si tu sauvegardes, compass va compiler et tu verras qu’il va non seulement compiler mais en plus créer une image dans ton dossier d’images, et que des classes vont se créer automatiquement. Mais comment utiliser les classes ? Rien de plus simple ! A l’étape 2 tu as nommé ton dossier, correct ? Et dans ton dossier, tu as des images qui elles aussi sont nommées, toujours correct ? Du coup, les classes sont créées selon le modèle suivant : « nomdudossier-nomdel’image ». Exemple mon dossier s’appelle icons et j’ai une image qui s’appelle search.png, ma classe sera .icons-search ! Simple non ? Et ça fait du bien à ton navigateur !

Allez, on conclut ?

J’espère que ce petit tutoriel t’auras plu ! Et j’espère aussi que tu vois les bien faits de SASS et Compass maintenant ! Sache que je me suis limité à quelques avantages dans ce tutoriel mais note que Compass offre des possibilités encore plus dingues, et pour en savoir plus, rien de mieux que de fouiller un peu la documentation de Compass.

Retiens également qu’il existe d’autres librairies de mixins comme Bourbon pour SASS, et qu’il existe d’autres pré-processeurs que SASS (notamment LESS ou Stylus) et qu’au final, c’est à toi que doit plaire ton pré-processeur. J’ai surtout parlé de SASS et de Compass parce que ce sont les outils que j’utilise personnellement de manière quotidienne.

Enfin, un dernier mot sur le titre de cet article : Comme je te l’ai dit au début, on commence une petite série de billets sur le workflow, j’ai mes idées pour les prochaines éditions, mais ce qui m’intéresse vraiment c’est de faire du contenu qui t’intéresse toi ! Donc si il y a une notion, un tuto, ou quoi que ce soit qui touche au workflow et que tu aimerais voir développé sur le blog, n’hésite pas une seule seconde à m’en parler dans les commentaires, j’en tiendrais compte pour les prochaines publications, c’est promis !

Merci à toi d’avoir suivi le tuto, et à très bientôt pour un nouvel article encore plus stylé !

Booste ton workflow #1 : Apprendre SASS et Compass
4.9 (98.18%) 11 votes

Ce qui pourrait également t'intéresser ...

28 réflexions sur “ Booste ton workflow #1 : Apprendre SASS et Compass ”

  1. Super article Vincent, j’ai adoré !
    A peine commencé et le « tu ne CSSras pas » m’a achevé pour la journée !
    Petite précision pour la console windows tu peux aussi drag&drop un chemin de dossier/fichier

    PS: Pas de conseil séduction ?

    1. J’avoue que je suis plutôt fier de la punchline
      Merci à toi pour la console Windows, je l’ajoute dans l’article !

      Et non désolé, pas de conseil séduction, mais tu peux demander à ton collègue Quentin Haensler de t’en donner, puisqu’il écrit un livre sur Tinder et qu’il dénigre mes conseils

    1. Ahhh ! Ça me fait plaisir ça Tu parles des Sprites ? Je m’en suis servi récemment sur un projet client et ça marche vraiment du tonnerre

  2. Sass et Compass sont devenus incontournables pour tout intégrateur web qui souhaite gagner du temps et automatiser au mieux ses développements. Bon article, plutôt généraliste, mais qui saura éclairer les novices sur les avantages des ses nouveaux outils

    1. Merci pour ton retour Jibéo ! L’article et cette série se veut plutôt généraliste, pour offrir à tous la chance de découvrir un large panel d’outils pour que chacun compose son propre workflow comme il l’entend, ce que je cherche à éviter c’est d’enfermer les lecteurs dans MON workflow qui n’est le meilleur que pour moi !

  3. Bonjour tout le monde voilà jme lance aussi sur le sujet depuis quelques temps et j’avoue ne pas comprendre l’utilité de l’installation via ruby gem etc alors qu’il y a des outils qui automatisent tout….

    Y’a un intérêt ?

    1. Une meilleure emprise sur ton environnement de travail. Les outils automatisés choisissent des paramètres par défaut pour toi. Si un jour tu réalises qu’un des paramètres bloque ton travail, il te suffit de le changer manuellement, de refaire une install, bref, en gros tu gères ton truc de A à Z toi même. C’est la raison pour laquelle j’ai également suivis un tutoriel de Grafikart pour avoir son propre serveur Apache et MYSQL sur mon macbook pro, j’en avais assez de dépendre de MAMP et autres, et maintenant je suis libre comme l’air

  4. Il y a quelques oublis.. notamment l’installation de la gem Sass après l’installation de Ruby je crois.. enfin, j’ai du faire comme ça à l’instant, merci de m’avoir donner envie de m’y mettre!

    1. Hello Yaaas Pourtant c’est bel et bien dans l’article, tu m’as foutu le doute :p Point 4 pour Windows et point 1 pour Mac OSX! Je suis content que tu t’y sois mis, ça vaut vraiment le coup alors fonce

  5. J’ai de gros problème à l’installation,

    « gem install sass » OK

    le chemin de mon fichier style.scss OK

    Ensuite je met « sass–watch scss:css » dans mon fichier style.scss?
    ou dans ruby?

    J’ai essayé beaucoup de manip’ rien à faire rien n’apparaît dans mon dossier CSS

    Merci d’avance pour vos réponse

    1. Hello Kevin,

      Je suis désolé j’ai du être peu clair dans mon tutoriel, en fait tu dois écrire « sass –watch scss:css » (attention aux espaces et tout !) dans ton terminal, après avoir navigué jusqu’à ton dossier à coup de « cd » ! Je t’invite à lire ce post pour en savoir un peu plus sur le terminal de Windows : http://forums.cnetfrance.fr/topic/1216209-commandes-de-base-de-l-invite-de-commande-dos-windows, ou https://openclassrooms.com/courses/domptez-votre-mac-avec-mac-os-x-mavericks/le-terminal-dans-os-x pour le terminal de Mac OSX. C’est bourré de bonnes infos, et ça t’aideras sûrement à comprendre tes erreurs plus facilement

  6. Salut Vincent

    Depuis le temps que je voulais me lancer dans ces histoires de variables…
    J’ai donc suivi le tuto à la lettre
    J’ai galéré pour les histoire de commande
    Mais une fois fait j’ai une erreur :
    « error no such file or directory @rb_sysopen – scss »
    Et effectivement il me copie rien dans mon dossier css, mais il me met un fichier dans le dossier scss…
    Je me suis plantée où?

    Une autre question, je code habituellement sous dreamweaver, mais il connait pas les fichiers scss, le mieux serait d’utiliser quoi?

    Merci

      1. Mince, désolé Leslie je suis passé à côté de ton commentaire hier. Je suis content que tu aies trouvé la source de ton problème, et oui compass c’est totalement génial ! Bon courage !

        1. Salut Vincent
          Ca fait 2 jours que je cherche désespérément à trouver une solution pour coder en scss sous Dreamweaver ou Notepad++, parce que sans les codes couleurs et l’écriture intuitive, je vais perdre un temps fou… Tu travailles avec quoi?
          Merci

          1. Salut Vincent
            Je reviens vers toi complètement déprimée!
            Je suis super convaincu de l’utilité de sass et compass, je commence un gros projet et je voudrais utiliser compass vu toutes les infos que j’ai trouvé!
            Ruby fonction, il m’a bien généré tous les fichiers, il compile bien sass, mais impossible de charger la librairie compass, @import « compass »; j’ai un message d’erreur :
            Errno::ENOENT: No such file or directory @ rb_sysopen – C:/Users/Leslie/…/.sass-cache/75fcaf1b4852ceb732871195e41567cc2a7d8997/C%058/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/general/_hacks.scssc20160303-6660-1c519i6″;
            Je t’embête avec ça car je n’ai pas trouvé de forum français sur compass pour poser ma question.
            Merci

          2. A force de bidouille, j’ai remarqué que si je supprimais la première ligne de mon config.rb
            require ‘compass/import-once/activate’
            je n’avais plus de message d’erreur et la librairie semble fonctionner.
            Mais j’ai des Deprecation warning qui apparaissent…

  7. Bonjour,
    Tout d’abord merci pour ces différents articles et liens très compréhensible pour un simple designer comme moi (sans réelle expérience de programmation).
    Je me lance dans la refonte de mon site et j’ai choisis d’utiliser le SASS.
    Ruby, Compass et Koala fonctionnent bien mais il y a une ombre au tableau :(.
    Lorsque je compile mon fichier .scss le fichier CSS généré contient une ligne de débuggage (je suppose) avant chaque règle :
    @media
    -sass-debug-info{filename{font-family:file://C:/MAMP/htdocs/RACINE_DU_SITE/DOSSIER_SASS/NOM_FICHIER.scss}line{font-family:000318}} <– La valeur de "line{font-family:000318}" change à chaque nouvelle
    règle.

    Auriez-vous une solution??

    Merci de toute l'aide que vous pourrez m'apporter, j'ai hâte de m'y mettre ;D

  8. … heu désolé le « @media-sass-debug-info » est le résultat de l’erreur, le « code » de l’erreur est :
    —uncaughtException —
    Error:ENOENT, no such file or directory
    ‘CHEMIN D’ACCES AU FICHIER CSS’
    at Object.fs.openSync(fs.is:427:18)

    J’espère que ça pourra vous aider (moi pas ;p)

  9. désolé, les « @media-sass-debug-info » générés ne sont que le résulta de l’erreur :p
    le « code » de l’erreur est :
    — UncaughtException —
    Error:ENOENT, no such file or directory
    ‘CHEMIN D’ACCES AU FICHIER CSS’
    at Object.fs.openSync(fs.is:427:18)

    Merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir