Créer un thème WordPress avec LessCSS

wordpress lesscss

Aujourd’hui, j’ai dû mettre les mains dans le code pour pouvoir alléger un thème qui a plus de 44 000 lignes. Le thème a tellement de possibilité que le fichier css est énorme.

A ma grande surprise, et ce n’était documenté nulle part dans la doc du thème mais ils ont utilisé lesscss pour créer le thème. Cela fait longtemps que je ne m’étais plus penché sur du lesscss pour créer un site, le dernier framework que j’avais essayé de faire avec ça, c’était un générateur de thème pour magento 1.

Qu’est-ce que LessCSS ?

Lesscss est un préprocesseur css en javascript qui permet de générer des codes CSS à partir de déclaration, et vous indentez votre codes css selon le niveau hiérarchique que vous voulez donner. Est-ce que c’est mieux que Sacss ? Non pour moi c’est pareil, il suffit juste de s’adapter, le process sera quasi identique pour Sacss il suffira de renommer vos fichiers .less en .scss.

Quel est l’avantage de LessCSS ?

Le Css c’est plutôt statique, mais avec lesscss, cela permet de faire des calculs et d’avoir un code css un petit mieux maintenable. Losque vous voulez changer la  couleur principale, ou la police pourtout le site, vous pouvez changer une variable, et elle sera répercutée dans tout le site.

Comment implémenter LessCSS dans votre thème ?

Partons sur le principe que vous partez d’un thème vierge, vous créez juste.

Vous devez télécharger less.php pour le copier dans votre thème.

Vous allez avoir donc un fichier zip, et vous allez créer un fichier style.less dans lequel vous appelerez les autres fichiers dont vous avez besoin.

Variables.less

Vous aurez besoin au minimum du fichier variables.less c’est dedans que vous définirez les variable pour la couleur dominante, secondaire, la police principal, la police secondaire.

Les variables commencent par le signe @

@color1:red;
@color2:blue;

 

Ensuite dans vos définitions css vous n’avez plus qu’à utiliser vos variables :

h1{color:@color2;}

h1 a {color:@color1;}

 

Ca génèrera :

h1{color:blue;}

h1 a {color:red;}

 

Mixin.less

Le fichier Mixin, est un fichier utilitaire, où l’on va définir certaines variables outil.

Par exemple:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Pourra être utilisé comme variable ailleurs :

#menu a {color: #111; .bordered();} 
.post a { color: red; .bordered();}

Donc si vous avez tout bien compris, on crée une class CSS que l’on va pouvoir réutiliser dans le différents fichiers .less et créer de véritables cascades CSS.

Le Nesting

C’est la présention et l’imbrication du css pour générer en sortie le code css avec ses variantes :

#header {color: black; 
  .navigation {font-size: 12px; } 
  .logo { width: 300px; } 
}

Produira le code suivant

#header { color: black; } 
#header .navigation { font-size: 12px; } 
#header .logo {width: 300px;}

 

Donc on va gagner du temps, mais il faut rester très organisé et rigoureux ! On peut vite se noyer en erreur en se trompant de définition.

@import dans lessCss

Bien que c’est une des choses que l’on évite directement dans le css parcque cela ralentissait les chargements, c’est plutôt nécessaire lorsque l’on travaille avec lesscss pour générer le gros fichier css final.

Comment compiler des fichiers lesscss dans wordpress ?

Au départ, lesscss était un javascript qui s’éxécutait sur un serveur nodjs ou côté utilisateur, par un fichier javascript. Nous allons utiliser less.php qui est un port de lesscss.js.

Il existe des fichiers de base pour gérer les grilles, bootstrap, etc…

Vous les trouverez ici

Ici je ne vais me contenter que de mettre en place la base, et je vous laisse le soin de faire travailler votre imagination.

  • créez un répertoire lib,
  • créez un répertoire CSS
  • dézippez les fichiers dedans
  • créer un fichier style.less

Vous avez donc  :

/lib/less.php-master/

/css/less/style.less

/css/less/cache

C’est dans le dossier cache que l’on veut générer le fichier style.css

Voilà maintenant vous pouvez télécharger votre fichier via ftp, et chaque fois que vous enregistrerez votre fichier et que vous l’uploadez, votre fichier style.css sera recréé dans le répertoire cache.

Ensuite il faudra copier ce bout de code dans votre fichier function.php

// Compile les fichiers PHP et les sert dans le fichier de cache.
add_action( 'wp_print_styles', 'compile_less_files_to_css' );
function compile_less_files_to_css() {
require('lib/less.php-master/lessc.inc.php');

$to_cache = array( realpath(dirname(__FILE__) . "/css/less/style.less") => get_bloginfo('wpurl') );
Less_Cache::$cache_dir = realpath(dirname(__FILE__) . "/css/less/cache");
Less_Cache::CleanCache();

$parser_options['compress'] = true;
$css_file_name = Less_Cache::Get( $to_cache, $parser_options );

wp_enqueue_style( 'style', get_template_directory_uri() . "/css/less/cache/" . $css_file_name );
}

 

Pour aller plus loin, je viendrais mettre à jour cette page.

Quelle est la meilleure structure pour faire du Tree Shake avec lesscss ?

L’avantage avec lesscss c’est que l’on peut faire des fichiers séparés, et donc optimiser pour charger d’abord les css critiques, et charger avec du lazy load le reste des css.

Le fichier Variables.less

Couleurs Primaire et secondaire du thème

@color1: ;
@color2: ;

Fonts utilisées

@font1:’Roboto’, arial, sans-serif;
@font2: ‘Raleway’,Verdana, Geneva, sans-serif;

Fond utilisés

@background1:;

@background2:;

Les largeurs responsives

/* —————————————————————————-
responsive settings
*/
/* responsive landscape tablet */
@responsive_l_tablet_max: 1140px;
@responsive_l_tablet_min: 1019px;

/* responsive portrait tablet */
@responsive_p_tablet_max: 1018px;
@responsive_p_tablet_min: 768px;

/* responsive portrait phone */
@responsive_p_phone_max: 767px;

 

Ensuite un fichier type.less pour y définir vos tailles de texte

head.lesscss

head-menu.less

blocks.less

 

 

 

Je reviendrais mettre à jour cet article 😉

 

Notez ce post
0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

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