Tuto : CSS, gagnez du temps avec LESS !

Le CSS permet de mettre en forme les sites internet (couleurs, dimensions, images de fond...). Comme SASS, LESS est un langage informatique qui permet de créer des feuilles de style simplifiées pour la création de vos sites internet. Nous vous faisons part aujourd'hui de note expérience pour mettre facilement en place cet outil lors de la création de vos sites web !

Tutoriel

Prérequis du tutoriel :
CSS niveau intermédiaire
HTML niveau basique

Téléchargez l'exemple

Les possibilités de LESS

LESS est très proche de CSS : vous pouvez écrire du code CSS dans un fichier LESS, le code reste valide. Cependant LESS apporte de nombreuses possibilités qui vous simplifient la vie :


Les paramètres

Il suffit de mettre @ pour créer un paramètre que l'on pourra appeler à tout moment :

@largeur: 980px;

#element{
width: @largeur;
}

h1{
width: @largeur;
}

Une fois compilé la feuille de style LESS renvoie le code CSS suivant :

#element{
width: 980px;
}

h1{
width: 980px;
}

C'est extrêmement pratique pour les couleurs ! Plus besoin de noter les codes hexadécimals, il suffit de les déclarer une fois dans la feuille de style !

@jaune: #fd0;

#element{
background: @jaune;
}

Les mixins

On peut créer des bouts de CSS que l'on pourra rappeler autant de fois que l'on veut !

.up{
text-transform: uppercase;
}
.abs{
position: absolute;
}

#element{
.up;
.abs;
}

Renvoie en CSS :

.up{
text-transform: uppercase;
}
.abs{
position: absolute;
}

#element{
text-transform: uppercase;
position: absolute;
}

Il est possible ainsi de ne plus écrire les préfixes -moz-, -webkit-... (voir l'exemple).


Calculs

On peut faire des calculs directement dans le CSS sans sortir la calculette !

#element{
width: (@largeur - 200px) / 2;
}

Couleurs

On peut éclaircir ou foncer une couleur !

#element{
background: @jaune - 10%;
border: 1px solid lighten(@jaune, 20%);
}

Commentaires

// Permet de commenter une ligne comme dans PHP et JavaScript

Nous présentons ici les fonctions les plus utilisées au quotidien, mais il en existe d'autres :

LESS sur Wikipédia
www.fr.wikipedia.org/wiki/LESS_(langage)

Le site officiel de LESS (en anglais)
www.lesscss.org

Utiliser LESS !

Concrètement comment utiliser LESS sur vos sites web ?

Il faut compiler votre fichier LESS en CSS. Il y a plusieurs façons de le faire : avec Ruby, en JavaScript, mais après quelques tests la plus simple reste de loin le logiciel SimpLESS :

1 Téléchargez et installer SimpLESS
www.wearekiss.com/simpless
Dézippez et placez le dossier dezippé où vous voulez, par exemple dans le dossier Programme de votre ordinateur.
Ouvrez le dossier et créez un raccourci vers SimpLESS.exe que vous placez dans un endroit pratique à retrouver
(par exemple sur Windows 10, clic droit sur SimpLESS.exe > Épingler à l'écran d'accueil)

2 Créez votre première feuille de style !
Créez avec un éditeur de texte (ici nous utiliserons Notepad++) un fichier avec l'extension .less par exemple style.less

3 Démarrez SimpLESS en cliquant sur votre raccourci

4 Glissez-déposez le fichier style.less dans SimpLESS
Décochez prefix et love

5 Dans votre page HTML faites un lien vers style.css comme d'habitude. Par exemple :

<link rel="stylesheet" href="/style.css" />

6 Commencez à écrire votre code LESS/CSS dans style.less !

À chaque enregistrement SimpLESS va automatiquement convertir style.less en style.css !

Vous avez également la possibilité de minifier le CSS généré en cochant minify. De plus, SimpLess vous avertis si vous faites une faute de syntaxe CSS !

 

Coloration syntaxique

Pour la coloration syntaxique et l'autocompletion dans Notepad : Langage > C > CSS

Pour garder des couleurs lisibles placez vos mixin à la fin des propriétés.

Problèmes

Si la conversion ne se fait pas automatiquement vous pouvez essayer de vider la liste de SimpLESS avec le bouton corbeille puis reglisser vos fichiers. Si ça ne marche pas, vous pouvez toujours convertir les fichiers manuellement avec le bouton actualiser.

Si la conversion ne se fait pas du tout c'est que vous avez une erreur de syntaxe dans le code LESS, par exemple un paramètre non-déclaré.

Édit du 14 mars 2016

L'éditeur de texte Brackets dispose également d'une extension qui réalise le même travail de conversion que SimpLess :

Fichier > Gestionnaire d'extensions

Rechercher LESS AutoCompile

Du coup plus besoin de démarrer SimpLess à chaque fois que l'on veut travailler en LESS.

De plus, Brackets identifie automatiquement le LESS comme du CSS.

Auteur : Nicolas Barré

Posez votre question !