Comment minifier/déminifier le CSS avec Compass

Compresser les assets sur un site web permet un gain de performance. Il est évident qu’un fichier de taille modeste prendra moins de temps à charger pour un navigateur internet. Le principe de minification (si on peut le dire ainsi en français) repose sur la suppression de caractères non interprétés(espaces, tabulations et saut de lignes) et le renommage des variables et des fonctions en noms plus courts. Compass est un framework CSS permettant de compiler le CSS avec SASS. Il présente de nombreuses fonctionnalités et de nombreux avantages que vous pouvez découvrir dans ce tutorial pour faire vos premier pas avec Compass. Avec Sass, on édite donc plus directement le CSS. Ce qui crée une distance entre l’intégrateur et les fichiers générés. Pendant le processus de compilation de Compass on peut rajouter une étape de minification.

Il peut être intéressant de laisser son CSS décompressé en développement pour plus facilement pouvoir déboguer. Les lignes de commentaires que génère Sass sont également très utiles pour se retrouver et faire le lien entre le CSS et son code Scss/Sass.

Dans un environnement de production il sera très facile de compiler son projet avec des CSS minifiés.

Pour se faire, il suffit donc d’éditer le fichier config.rb à la racine du projet compass et de rajouter cette règle afin de changer le style de rendu du CSS.

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed #:expanded or :nested or :compact or :compressed

Ensuite lancer la commande

   $ compass compile

Les fichiers CSS sont maintenant magiquement compressées.
Quand vous aurez besoin de déboguer, il suffit donc de commenter cette ligne dans la configuration du build.

Les autres options pour la règle output_style permettent d’avoir d’autres niveaux de compression. En fonction de l’environnement où vous êtes, vous pouvez choisir laquelle est la plus adaptée pour vous, sachant que le classement de la plus lisible à la plus compressé est le suivant :

PLUS LISIBLE -> :expanded -> :nested -> :compact -> :compressed -> PLUS COMPRESSE

Vous pouvez également désactiver les lignes de commentaires en rajoutant cette ligne :

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

Articles similaires :

Mots-clefs : , ,

Laisser une réponse