Utiliser SASS et SCSS sur un serveur distant

Astuce par (Front-End Developer, Montréal)
Créé le , mis à jour le (26930 lectures)
Tags : css, php, html, scss, sass

Pour faire une histoire courte, j'ai toujours voulu utiliser SCSS et SASS pour mes projets web. J'ai acheté et installé Compass.app, super sympathique comme application. Mais j'ai souvent à travailler sur des projets distants. Je voulais donc pouvoir utiliser SCSS sans avoir à télécharger le CSS généré à chaque modification.

J'ai trouvé un moyen de travailler sur un serveur distant, sur un SCSS, enregistrer mes modifications et que je puisse ensuite, tout de suite, rafraîchir ma page et que cette dernière marche avec le CSS généré.

Voici:

  • Télécharger PHamlP
  • L'installer sur votre serveur distant où vous aller avoir votre CSS.
  • Vous créez un fichier .scss et travaillez dessus.

Enfin, vous créez un fichier .php avec ceci à l'intérieur:

<?php
header("Content-Type: text/css");
require_once('sass/SassParser.php'); //including Sass libary (Syntactically Awesome Stylesheets)
$sass = new SassParser(array('style'=>'compressed'));
$css = $sass->toCss('style.scss');
echo $css;
?>

Changez le style.scss par le nom de votre fichier .scss.

Dans votre projet vous mettez dans le header:

<link rel="stylesheet" href="/includes/css/style.php">

Vous pourrez ainsi travailler, sauvegarder et ainsi avoir toujours vos dernières modifications dans le projet.

Ressources

Commentaires

dew a dit le

Il faut également penser à la mise en cache, car solliciter PHP pour générer le CSS qui pourrait être délivré en statique réclame des ressources supplémentaires.

incube a dit le

Après le développement tu peux à ta guise changer le php pour ton css à mettre en cache. Après le développement de toute façon SASS n'est plus pratique.

MoOx a dit le

Dire que tu as acheter "Compass" n'a pas de sens, puisque c'est une librarie pour Sass téléchargeable gratuitement (via rubygems par exemple).
Ce que tu as acheter c'est "Compass.app", une application qui permet de s'affranchir des lignes de commandes pour utiliser Compass (qui je le repète est une librarie utilisant Sass et à la fois une surcouche).

Le but n'est pas du tout de me faire de la pub mais j'ai écris plusieurs billets sur Sass et Compass où tout est un peu mieux expliqué http://moox.fr/tag/sass

Côté serveur il y'a aussi Assetic à citer https://github.com/kriswallsmith/assetic, j'ai contribuer en codant le filtre Compass. Lui gère la mise en cache & co.

incube a dit le

Effectivement c'est l'application que j'ai acheté, de plus mon but n'est pas d'expliquer comment fonctionne SASS ou l'application mais bien d'avoir une méthode pour travailler avec SASS sur un serveur distant. Donc, aussi, autrement qu'avec une méthode qui se fait côté client. C'est toujours interressant de découvrir d'autre outils qui peuvent mieux s'agencer avec notre méthode de développement.