View
48
Download
2
Category
Preview:
Citation preview
Sommaire
● Que sont les préprocesseurs CSS ?● Comment intégrer les préprocesseurs CSS à son workflow
en Remote Editing ?
Les préprocesseurs CSS
● Ce sont des outils permettant de transformer un langage (avec une syntaxe semblable à CSS), en CSS valide.
● Les deux préprocesseurs les plus utilisés sont Sass et Less. ● Les préprocesseurs apportent une aide à l’écriture de vos
feuilles de styles (Gain de temps : DRY)
A lire sur humancoders.com : Les idées reçues sur les préprocesseurs CSS (Sass, Less…)
Encore trop peu utilisés
1. Nouvelle syntaxe à apprendre2. La résistance au changement3. Workflow inadapté
Ce dont on dispose en plus (par rapport aux CSS)
● Variables● Mixins● Règles imbriquées (Nested rules)● Calcul (Operation)● Portée (Scope)● Conditions (Conditional Statement)
Less VS Sass, lequel choisir ?
● Réponse courte : Sass● Réponse légèrement plus longue : Sass est meilleur par bien
des aspects, mais si vous êtes content de Less, pas de problème, c’est déjà une très bonne chose d’utiliser un préprocesseur.
● Réponse détaillée (EN) : https://css-tricks.com/sass-vs-less/
Constat
Malgré toutes leurs qualités, les préprocesseurs peinent parfois à s’imposer en production, pour 2 raisons* :● Résistance au changement ● Workflow inadapté : le remote editing
*d’après une étude empirique sur un panel pas représentatif, mais que je côtoie :)
Le résistance au changement
Ce qu’il faudrait (au moins) éviter :● Des outils propres à un seul OS● Imposer un nouvel éditeur de texte● Être obligé d’utiliser les lignes de commande
Ce qui n’est parfois pas négociable : le remote editing
le Remote editing, mais pourquoi au juste ?
● Une seule version à maintenir ● Pas de maintenance d’un serveur local.● Immédiateté des interventions en prod.
MAIS AUSSI : il est parfois impossible d’installer une version locale du site pour des raisons technique et de licence.
Workflow “full remote”
● Editeur de texte λ associé à Transmit, WinSCP ou Filezilla.● Dreamweaver, Coda & notepad ++ : gestionnaire de site et
FTP intégré.
Incompatible avec des outils de préprocessing “en local”Solution : installer le préprocesseur sur le serveur, compilation à la demande : LessPHP ou Sass si le serveur le permet…
Workflow “half remote”
On travail sur une copie locale, mais on upload les fichiers modifié après chaque sauvegarde.● Sublime Text + Package SFTP● Dreamweaver et son gestionnaire FTP intégré● Editeur de texte λ + Task runner (Grunt, Gulp)
Solution idéale mais incomplête selon l’éditeur : Recours à un preprocesseur externe
Workflow half remote
Fichier locauxLiberté du choix de préprocesseur
Comment gérer l’upload lors de la sauvegarde ?
Comment intégrer les préprocesseurs à son workflow
en remote editing ?Surtout si en plus c’est sur du mutualisé,
donc sans librairies exotiques sur le serveur…
Prérequis
● Les fichiers devront être présent en local.● Il faut trouver un moyen d’envoyer sur le FTP les fichiers
compilés (CSS) aussitôt après qu’ils aient été généré.
Cahier des charges (anti-résistance au changement)
● Pas d’OS Spécifique● Pas de ligne de commande● Pas de nouvel éditeur● Pas de nouveau workflow
Sublime Text + Package SFTP
Inconvénients : ● Pas mal de chose à installer, dont parfois en ligne de
commande.● Et si j’aime pas Sublime Text ?
Avantage : Liberté du choix de l’éditeur (même Dreamweaver !)Accès à tout un tas de fonctionnalités complémentaires, dont :● Compression● Concaténation● Upload FTP
Editeur de texte λ + Task runner (Grunt, Gulp)
Inconvénients :● Courbe d’apprentissage importante● Ligne de commande là encore quasi indispensable● Upload FTP “Build & save” moins stable que ST + SFTP
Editeur de texte λ + Task runner (Grunt, Gulp)
● Win & Mac● Liberté de choix d’éditeur de texte● Richesse des bibliothèques :
o CSS : LESS, SASS, Styluso HTML : jade, haml, slim, markdown, kito JS : Coffeescript, Livescript
● FTP intégré : o Build & Upload on saveo File filters
Prepros
Conclusion
Ne (presque) rien changer : Prepros + n’importe quel editeur
Si déjà sous Sublime Text : pas besoin de task runners : package Less, Sass et SFTP.
Recommended