Écrire un article
Tea Innovation



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é



retour au blog

Commentaires  

Zyccymn 15-04-2019 21:33
Tras su aprobaciГіn despuГ©s de mГЎs de una dГ©cada en la Asamblea Nacional y una controversia innecesaria sobre su transmisiГіn, la pensiГіn de seguridad
bienestar social
GuГ­a de Objacare nj: honorarios del abogado de discapacidad de la seguridad social Obamacare New Jersey Obtenga una nueva tarjeta de seguridad social, nГєmero de telГ©fono de seguridad social, cambio de nombre de seguridad social, oficina de administraciГіn de seguridad social, oficinas de seguridad social
Signaler à l’administrateur
Elllarf 12-04-2019 23:14
FarmР С–РЎС›cia Italiana Q Vende Cytotec Comment Utiliser Cytotec Pour Avorter Medicament Pour Avorter Sans Ordonnance cialis overnight shipping from usa Buy Cheap Zithromax Generic Levitra From Uk
Signaler à l’administrateur
Zukhaum 30-03-2019 16:32
Board-certified dermatologist Dr. Lesley Loss is the president and owner of Dermatology Associates of Rochester, where she performs medical and cosmetic dermatology treatments for patients of all ages.
acne scars before and after chemical peel
Sensorial evolution of cassava flour (Manihot esculenta crantz) added to protein concentrate cassad Gateway
Signaler à l’administrateur
Zukhaum 30-03-2019 05:50
Board-certified dermatologist Dr. Lesley Loss is the president and owner of Dermatology Associates of Rochester, where she performs medical and cosmetic dermatology treatments for patients of all ages.
deep chemical peel before and after
Sensorial evolution of cassava flour (Manihot esculenta crantz) added to protein concentrate cassad Gateway
Signaler à l’administrateur
Zukhaum 29-03-2019 17:13
  While our facial skin’s cells all start out with the exact same DNA, they don’t all look alike. Skin, more than any other organ, reflects a genetic
chemical peel before and after photos
EP0804148A1 - Lipophilic hydroxylated acid, cosmetic and pharmaceutical use thereof and method for preparinSTI.GOV
Signaler à l’administrateur
Yolloket 26-03-2019 21:13
PDFelement is a powerful, yet easy to use PDF editing system where you can create, organize, and secure your files. With its flexible pricing,
class math
This tiny desk contestant braved the elements of alaska to pay tribute to his grandmother wwno gas meter in spanish
Signaler à l’administrateur
Zukhaum 24-03-2019 09:30
Aesthetic Solutions is Best Cosmetic Clinic in Mumbai, offers a complete range of aesthetic solutions for hair, skin and body.
benefits of a chemical peel
Advanced Characterization Techniques for Thin Film Solar Cells - Advanced Characterization Techniques for Thin Film Solar Cells - Wiley Online - Issuu
Signaler à l’administrateur
Zukhaum 23-03-2019 20:33
At Aura Boulder, Dr. Nathan Roesner and his staff strive to provide the best Skin & Plastic Surgery care in Colorado. (303) 747-6728
chemical peel before after
Full text of "DTIC ADA498078: Journal of Special Operations Medicine, Volume 7, Edition WIKI 2
Signaler à l’administrateur
Zukhaum 23-03-2019 07:49
Chemical Peels to rejuvenate and beautify Skin in New Jersey Area by Dermatologist Dr. Rapaport. Call us today to schedule your appointment (201) 731-4050
chemical peel procedure
Chromatography Most Versatile Method Chemical Analysis i to 12 Chromatography High Performance Liquid Chromatou Feel
Signaler à l’administrateur
Annikabs 06-03-2019 06:12
Pour prГ©venir ce problГЁme de comportement, il faut essayer d'augmenter le self-control du chien. On procГЁde de maniГЁre progressive, en l'habituant Г ...
anxious meaning in bengali
Evidence for resident memory t cells in rasmussen encephalitis anoxia adalah
Signaler à l’administrateur

Posez votre question !

Code de sécurité