Sélectionnez votre langue

Les news !
Informations, tutoriels
Dédié principalement Joomla! mais plus si affinité
Tuto SCSS

Beaucoup de CMS comme Grav utilisent des fichiers de feuille de style .SCSS. On peut les considérer comme une extension du CSS avec tout un tas de fonctionnalités, comme la possibilité d’imbriquer les règles sur plusieurs niveaux sans répéter le sélecteur conteneur, mais au bout du bout, les fichiers SCSS devront être compilés pour être transformés en fichier .CSS. Seuls, aujourd'hui, les fichiers .CSS peuvent être lu par les navigateurs.

Gantry 5 travaille avec les SCSS et utilise un compilateur intégré. Grav qui travaille aussi avec les SCSS, par contre n'a pas, à l'heure actuel, de compilateur intégré. Si vous choisissez un travail de customisation de votre site avec Grav en utilisant le _custom.scss, vous devez dans un premier temps compiler en local votre fichier SCSS puis importer les fichiers compilés dans le bon répertoire de votre serveur (via FTP). 

Je vais vous monter comme compiler sous Windows !!

Pour cela il faut installer sur votre ordinateur SASS (pas mal d'info ici). Sur windows (pas sur Mac) SASS peux s'installer avec Ruby, dont le support est un langage open-source dynamique qui met l'accent sur la simplicité et la productivité (dixit l'auteur).

Si vous êtes sous Windows, il existe un projet qui vous aide à installer Ruby : RubyInstaller. Il vous fournit tout ce dont vous avez besoin pour mettre en place un environnement complet de développement Ruby sur Windows (je suis pas développeur !!).

Téléchargez-le, lancez-le, et c’est réglé !

Lancer le Ruby "command prompt" (invite commande) 

ruby lancer command prompt


puis installer simplement SASS en tapant cette commande

gem install sass

ruby install sass

SASS est installé au niveau hiérachique "Home" de windows.

A ce niveau vous créez un répertoire compil (vous l'appelez comme vous voulez). Dans ce répertoire, vous créez 2 sous répertoires, scss et css-compiled. L'idée c'est de mettre les fichiers à compiler dans scss et de retrouver les fichiers compilés dans css-compiled.

 Donc, vous mettez vos fichiers .scss dans le répertoire scss. Pour info, mes fichiers exemples sont les fichiers .scss de base du template Grav Antimatter.

fichiers a compiler

Vous tapez la commande cd compil pour vous placer dans le bon répertoire de travail.

Puis la commande scss --watch scss:css-compiled et c'est parti.

 ruby prompt compilation

C'est très rapide. Verifiez qu'il n'y a pas de message d'erreur (les fichiers .scss font souvent appellent à d'autres fichiers)

Vos fichiers compilés sont maintenant dans le répertoire css-compiled.

Ctrl-C pour retourner sur une ligne de commande Ruby.

Bonne compil'

Devenez un client privilégié !

Contact

En Toutes Lettres est une société basée en Essonne (91). Nous sommes toujours présents pour une information complémentaire :

logo gris
  06 29 16 98 38
En toutes lettres
4 rue Antoine Bréguet
91750 CHAMPCUEIL
 

Derniers commentaires