Installation de Compass et Sass sur Windows

Voici aujourd’hui un petit tuto sur l’installation de Compass et SASS. Pour ceux qui ne connaissent pas, Compass est un Framework CSS utilisant SASS, une puissante extension de CSS3 permettant
la création de variables, de mixins, d’arborescence des selecteurs, etc.

 

 

Voyons donc comment l’installer :

En premier lieu, téléchargez Ruby à cette adresse : http://rubyinstaller.org/downloads/, et installez le en prenant garde à bien cocher la case « Add Ruby executables to your PATH » lors de l’étape 2.

Ensuite, ouvrez l’invite de commandes Windows en mode administrateur, et écrivez :

gem install sass

puis

gem install compass

 

Une fois cela fait, rendez-vous dans le dossier de votre site avec la commande cd :

cd C:\wamp\www\site_test

Et tapez ensuite :

compass create

 

Vous devriez à présent pouvoir constater que 2 nouveaux dossiers (+1 caché) ont été créés par Compass à l’endroit spécifié. Notez également la présence d’une fichier config.rb.

Le dossier « Stylesheets » contiendra vos fichiers .css, et le dossier « SASS » vos fichiers .scss.

Si vous souhaitez renommer ces dossiers, il est impératif de modifier le fichier config.rb et de remplacer l’ancienne configuration par la nouvelle. Par exemple :

css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

 

Pour écrire vos CSS, vous éditerez toujours les fichiers .scss du dossier « sass ». Ainsi, commencez par ajouter au fichier screen.scss :

body {
    background-color:red;
}

Pensez à lier votre feuille de style CSS à votre HTML, puis actualisez votre page Web.

 

Rien ne se passe ? C’est normal ! Le fichier doit être compilé.

Pour cela, retournez dans votre terminal et entrez :

compass compile

Cette fois-ci, vous pouvez actualiser la page et constater que vos changements ont été pris en compte.

Mais je vous vois venir…

 

Donc je vais devoir écrire « compass compile » à chaque fois que je fais une modification ? :O ?

 

Eh bien non, Compass à prévu le coup :). Vous pouvez tout simplement écrire :

compass watch

qui surveillera le projet et compilera automatiquement les fichiers .scss s’ils sont modifiés.

 

Vous avez maintenant toutes les bases pour débuter avec Compass et SASS, et vous constaterez que le gain de temps est démentiel.

Je vous invite à consulter la documentation de Compass pour mieux démarrer.

15 commentaires

  1. Pingback: Installation |
  2. adio a écrit :

    Nickel !

    Mais j’ai un petit soucis, quand j’écris la commande compass watch, il me compile automatiquement mais si je ferme le terminal/console, compass s’arrête de compiler, en gros à chaque fois que j’ouvre un projet je suis obligé d’entrer la commande compass watch.

    Quelqu’un aurait une solution pour qu’il compile tout seul sans devoir entrer la commande à chaque fois ?

    • P.Ghiazza a écrit :

      Bonjour,

      Euh en fait c’est tout à fait normal, tu ne peux pas faire tourner un process en permanence, après redémarrage, etc. Si tu n’as cependant pas le courage de lancer une toute petite commande, tu peux utiliser ce soft http://koala-app.com/, mais honnêtement, que tu lances le soft ou la commande direct, cela ne change pas grand chose.

      • adio a écrit :

        C’est pas un soucis du tout de taper la commande à chaque ouverture. 😛

        Enfaite le truc, c’est que j’ai formater mon mac et réinstaller les logiciels.

        Je travaille avec Net Beans et avant le formatage, j’avais configurer Net Beans avec SASS et Foundation… et il compilait automatiquement sans devoir entrer la commande à chaque ouverture de projets ou du programme.

        Le soucis, c’est que je n’arrive plus à le configurer de cette manière.

        Merci d’avoir répondu tout de même. 🙂

        • adio a écrit :

          Au final je crois que le soucis vient d’ailleurs, lorsque je veux fermer le terminal il m’affiche ce message :

          « Voulez-vous fermer cette fenêtre ?
          La fermeture de cette fenêtre entraînera la fin des processus ruby, fsevent_watch en cours d’exécution. »

          Si je ferme le terminal, il arrête de compiler…

          Mais je vais trouver. 🙂

      • adio a écrit :

        Trouvé !

        J’ai du (ré)installer  » fsevent_watch », je crois qu’il ne faisait que « s’activer ou se désactiver » lorsque j’entrais la commande compass watch ou quittait la console. 🙂

        Maintenant, ça se compile automatiquement sans devoir passer par le terminal à chaque ouverture du projet. 🙂

        fsevent_watch : http://macappstore.org/fsevent_watch/

        Désolé pour tous les commentaires. 😛

        Bonne soirée !

  3. Camille a écrit :

    Bonjour,
    Super tutoriel, merci !
    Je rencontre néanmoins un problème. Quand j’essaye de compiler j’ai ce message qui s’affiche  » Compatibility error character encoding: windows–1252 and UTF-8 Avez vous une solution ?
    Merci d’avance.

Laisser un commentaire

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