Comment utiliser Less, Sass et Stylus sur un serveur distant.

Attention ! Cet article a plus de 1 an (3292 jours), ce qui signifie qu'il n'est pas forcément à jour !

Pour faire suite à un article que j’avais déjà publié, Comment utiliser Sass et Scss sur un serveur distant, j’ai trouvé une méthode encore plus simple et efficace. D’autant plus, que cette méthode peut permettre l’utilisation de frameworks.

Tout d’abord, je suis désolé pour certains utilisateurs, mais cette méthode ne s’applique qu’aux utilisateurs MAC.

Cette façon de faire n’est peut-être pas optimal pour tous, car en effet j’utilise deux logiciels sous MAC, que si vous n’avez pas, la méthode peut ne pas fonctionner.

Commençons donc par le logiciel primordial. Il s’agit de CodeKit. Il s’agit d’un petit logiciel qui compile pour vous, de manière très intuitive, le code Less, Sass et Stylus. Il vous permet, entre autre, de pouvoir utiliser des Frameworks (j’y reviendrai plus tard). Voici pour ce qui m’intéresse. Mais sinon CodeKit vous permet aussi de faire de l’optimisation d’images, de vérifier vos erreurs Javascript, de compiler du CoffeScript, de compresser vos Javascripts et CSS.

CodeKit est fait pour fonctionner sur un site web local, comme la plupart des propositions habituelles. Cependant, j’ai réussi à le faire travailler sur un serveur distant avec Transmit, un logiciel FTP. Voici donc en étapes comment faire.

Étape 1

Avec transmit, vous avez la possibilité de monter un serveur FTP en tant que disque dur.

sassserv1

Votre disque dur va être ensuite accessible par le Finder, comme sur l’exemple suivant.

sassserv2

Étape 2

À partir de Finder, vous glissez votre disque dur monté, ou un dossier à l’intérieur, dans la fenêtre de CodeKit.

sassserv3

CodeKit va automatiquement créer les liens, faire en sorte que vous pourrez utiliser Sass, Less et Stylus. Du reste, pour les paramètres et fonctionnalités, référez-vous au site web de CodeKit.

Vous n’êtes pas obligés d’utiliser Transmit, j’ai réussi aussi à faire fonctionner CodeKit sur un serveur distant avec FUSE et Macfusion. J’ai cependant trouvé cela beaucoup plus lent qu’avec Transmit.

Étape 3 (optionnelle)

L’utilisation d’un framework peut vraiment être très pratique. Admettons que vous voulez utiliser Bootstrap, vous n’avez qu’à l’ajouter en tant que framework dans CodeKit et ensuite dans votre SCSS faire un @import "bootstrap.scss";. Un gros avantage est que vous pouvez tout de même garder localement votre framework, et donc le réutiliser dans tous vos projets. Si vous devez le modifier vous n’avez qu’une place à le changer pour que le résultat s’effectue sur tous vos sites. Vous aurez juste à recompiler votre site dans CodeKit. Vous pouvez donc sauvez du temps en vous créant un "template" et garder vos fichiers proprement en n’utilisant qu’un fichier maître.

Catégories :

CSS Javascript