[PYTHON] Utilisez LESS avec Django

Installation

Tout d'abord, installez node.js et lessc. Gununu.

$ brew install node
$ npm install -g less

$ which lessc
/usr/local/bin/lessc

$ lessc
lessc: no input files

usage: lessc [option option=parameter ...] <source> [destination]
...

J'ai pu l'installer!

Édition Watcher avec PyCharm (recommandé)

Si vous utilisez PyCharm, nous le recommandons car il peut simplifier la compilation automatique.

Commencez par créer un fichier avec l'extension .less.

Ensuite, il vous sera automatiquement demandé "S'inscrire avec File Watcher?", Donc ajoutez immédiatement watcher.

Ensuite, la fenêtre d'enregistrement Less watcher apparaîtra.

Puisqu'il reconnaît le lessc que vous avez installé précédemment, cliquez simplement sur OK.

Maintenant que l'observateur fonctionne, modifiez moins et enregistrez-le pour créer automatiquement le css. Facile!

↑ Bien que cela ressemble à une structure hiérarchique à l'écran, CSS est automatiquement créé dans le même répertoire.

Conversion en ligne avec le compresseur Django

$ pip install django-compressor

Ajout de compresseur à ʻINSTALLED_APPS`

Pour référence, jetez un œil au fichier HTML Django oscar

layout.html

    {% compress css %}
      {% if use_less %}
        <link rel="stylesheet" type="text/less" href="{% static "oscar/less/styles.less" %}" />
      {% else %}
        <link rel="stylesheet" type="text/css" href="{% static "oscar/css/styles.css" %}" />
      {% endif %}
    {% endcompress %}

Ça ressemble à ça. Pour use_less, settings.USE_LESS est utilisé tel quel.

Dans cet état, dans les paramètres

settings.py

COMPRESS_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'compressfiles')

USE_LESS = True

COMPRESS_ENABLED = True

COMPRESS_PRECOMPILERS = (
    ('text/less', 'lessc {infile} {outfile}'),
)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder'
)

Avec ce paramètre, less dans le bloc css compless sera construit ensemble.

Ceci est également utile car vous n'avez pas à vous soucier de sa construction, comme vous le feriez avec PyCharm.

Référence: Paramètres - Documentation Django Compressor 1.6

Conversion hors ligne avec la commande de gestion du compresseur Django

Lors de la compilation avec des commandes de gestion, en plus des paramètres ci-dessus

settings.py

COMPRESS_OFFLINE = True

COMPRESS_OFFLINE_CONTEXT = {
    'STATIC_URL': STATIC_URL,
    'use_less': USE_LESS,
}

Ajoutez ce paramètre supplémentaire. avec ça,

$ ./manage.py compress

Compilera désormais moins.

Référence: [Comment changer l'apparence d'Oscar - documentation django-oscar 1.1] (http://django-oscar.readthedocs.org/en/releases-1.1/howto/how_to_handle_statics.html)