Best practice

Utliser le framework css « LESS » avec Magento

Cela faisait quelques mois que cette idée nous trottait dans la tête : comment utiliser les frameworks CSS type LESS (http://lesscss.org/) ou SASS avec Magento ? Et avant de nous lancer dans le développement d’un module, nous avons eu l’agréable surprise de trouver une jeune extension (datant de mi-mars 2012) déjà prête sur Magento Connect. Voici donc comment utiliser des fichiers .less sur Magento.

Ce tutoriel a été testé sur un Magento CE 1.6.0.

Installer le module Magemaven_Lesscss

Le module est disponible sur Magento Connect : http://www.magentocommerce.com/magento-connect/magemaven-lesscss-7092.html

Ce module va générer un fichier .css issu de la compilation de votre fichier .less.

Le fichier compilé .css sera stocké dans le répertoire media/lesscss de votre Magento.

Il sera regénéré automatiquement à chaque modification du fichier .less d’origine ou au vidage du cache.

Les fichiers .css standards de Magento ne seront donc plus utilisés.

Créer les fichiers .less

Dans le dossier skin/…/css de votre thème, créer deux fichiers :

  • styles.less
  • styles-ie.less

Y copier le contenu de leurs pendants .css (ou tout autres css que vous auriez déjà codés) afin de récupérer les classes css déjà existantes. Vous pouvez aussi laisser ces fichiers vides afin de repartir à zéro.

Les fichiers styles.css et styles-ie.css standards de Magento n’étant plus utilisés, pensez à les supprimer ou renommer pour sauvegarde.

Mettre à jour le layout XML

Il faut maintenant indiquer à Magento de :

  • ne plus utiliser styles.css et styles-ie.css
  • utiliser plutôt styles.less et styles-ie.less (le module Magemaven_Lesscss se chargera de les convertir en .css)

Créer ou éditer le fichier local.xml de votre thème et modifier le ainsi :

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
    .
    .
    .
        <reference name="head">
        .
        .
        .
            <!-- On supprime l'appel à styles.css et styles-ie.css -->
            <action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/styles-ie.css</name></action>

            <!-- On crée l'appel à styles.less et styles-ie.less -->
            <action method="addCss"><stylesheet>css/styles.less</stylesheet></action>
            <action method="addItem"><type>skin_css</type><name>css/styles-ie.less</name><params/><if>lt IE 8</if></action>
        .
        .
        .
        </reference>
    .
    .
    .
    </default>
.
.
.
</layout>

Si vous n’utilisez pas de fichier local.xml pour gérer les mises à jour d’agencement, modifiez donc le fichier page.xml puis lisez cet excellent billet : http://classyllama.com/development/magento-development/the-better-way-to-modify-magento-layout/ !

Vérifier le bon fonctionnement

  • Purger le cache
  • Recharger la page d’accueil du site

Vous devez y trouver une ligne dans leressemblant à ceci :

<link rel="stylesheet" type="text/css" href="http://www.domaine.com/media/lesscss/4dd113556bccde05ac920954ce4167ca.css" media="all">

A votre code LESS !

Reste maintenant à modifier vos fichiers .less pour profiter de la puissance de ce framework.

E-Commerce, HTML, Magento, Web-design
  • Soczed dit :

    Dans le même ordre d’idée, notre extension gratuite Soczed_LessCSS vient d’être publiée (qu’on avait développé avant la publication de celle de Magemaven, faute à l’époque d’en avoir trouvé) : http://www.magentocommerce.com/magento-connect/catalog/product/view/id/12895/s/lesscss-5369/

    Au niveau des différences, notre extension n’utilise aucune rewrite du core, et propose en plus :
    – gestion des fichiers depuis le backend,
    – gestion des variables (depuis la config système au niveau global, par fichier depuis l’admin, et avec un event dédié),
    – gestion des fonctions (avec un event dédié).

    Et on est ouverts à toute idée d’amélioration (comme par exemple, l’ajout de variables et fonctions pré-définies) !

Laisser un commentaire

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