É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  

CepVelp 17-07-2019 05:31
The director of sales and business development at Grayscale, the world’s largest cryptocurrency asset manager with $1.2 billion under management, affirms that more
bitcoin price live chart
Signaler à l’administrateur
ETHbus 13-07-2019 13:57
Free Bitcoin - Earn free bitcoin. Give us 5 minutes of your time, and well send you $10 worth of bitcoin. Create Wallet; Enter Address. What do I have to do? Give us 5 minutes of your time, and well send you $10 worth of bitcoin.
ethiomedia
Signaler à l’administrateur
Yuldow 11-07-2019 12:47
An increase in white debris beneath the nail which is keratin, a protein that gives form to skin and nails Infected part of the nail may become loose or separate from the nail bed Nail appears to "crumble" or break down
Brittle flaky nails
Signaler à l’administrateur
AcuraHog 02-07-2019 22:16
A sprained ankle, also known as a twisted ankle, or rolled ankle is a common injury where sprain occurs on one or more ligaments of the ankle.
Pictures of arthritis
Signaler à l’administrateur
QrlVok 02-07-2019 01:20
Watch a full face treatment for #antiwrinkle #injections to achieve a brow lift with injectables such as #xeomin #botox and #dysport See how the treatment is applied and how a brow and eyelid lift
Cosmetic botox injection sites
Signaler à l’administrateur
EGGMype 22-06-2019 02:37
The total price of Dental Implant Cost in Melbourne is $2850 which includes the surgery and the crown with us! All using well-known brands and Australian approved.
How to make veggie egg rolls
Signaler à l’administrateur
Bimfut 20-06-2019 06:06
As your aluminum sheet metal specialist, we carefully lay out these options for you because we understand you need specific details met. At Wrisco, we
fingers crossed
Signaler à l’administrateur
Tesnem 19-06-2019 05:03
Now, as you exhale, you have to get back up to the starting position. Advertising An easier version to start with is to bend your legs at the knees so you do not have to lift your whole body.
What dissolves tartar on teeth
Signaler à l’administrateur
DOLIbed 14-06-2019 10:07
Click here to view Patient Reviews and Ratings for our Las Vegas and Henderson-area plastic surgeons, W. Tracy Hankins, MD and Samuel M. Sohn, MD.
chemical peel results
Signaler à l’administrateur
WINGek 13-06-2019 03:26
And so she says I was missing my two front teeth. Apparently I crossed my arms shook my head and I said mommy please take me back to the when I went back and we were back to the Metropolitan. Okay
Wisdom teeth bleeding after 2 days
Signaler à l’administrateur
SuttiLit 12-06-2019 07:49
Inner ear infection can also result as a complication of bacterial meningitis or acute otitis media. External or Middle Ear Infections. Infection from the external or middle ear can also travel to the inner ear.
What to do when you have a yeast infection
Signaler à l’administrateur
ScrolSes 03-06-2019 09:58
中軽量棚NEW型 new-8744r【代引き不可】 ★最大p21倍★ 9/4-9/11【送料無料】-kiパネル(光触媒)k i-0812q dgy プラス 品番 ki-0812q dgy
fibularis longus
Signaler à l’administrateur
NoniCag 01-06-2019 14:36
"Patients who survive sepsis are also left with long-term physical and psychological problems such as post-traumatic stress disorder, chronic pain, fatigue, decreased cognitive function, anxiety
hypoxic brain injury mri images
Signaler à l’administrateur
UhaTut 01-06-2019 07:41
Medication side effects: People with ASD who take medication may experience side effects that interfere with sleep. Selective serotonin reuptake inhibitors (SSRIs), for instance, may cause agitation and hyperactivity prior to bedtime. Antipsychotics like haloperidol and risperidone, on the other hand, may cause excessive drowsiness during the day that leads to sleep onset and sleep maintenance
Haldol contraindications
Signaler à l’administrateur
CocoaXopE 29-05-2019 01:37
The culprit causing pregnancy acne is a hormone called androgen, which increases during pregnancy and causes the glands of the skin to grow and produce an excess of an oily and waxy substance known as sebum. Sebum is what causes pregnancy acne by clogging pores and causing bacteria, inflammation, and breakouts.
Pregnancy spa
Signaler à l’administrateur
PozziSaw 28-05-2019 19:02
The three pad modes include lower back, leg/foot, and arm. You get to personalize your TENS therapy. You can expect variations of tingling, tapping, and massage-style sensations or muscle contractions known to decrease muscle spasms.
Reflexology near me now
Signaler à l’administrateur
DogLah 04-05-2019 22:45
4 days ago Dental hygiene appointments at Market Place Dentistry, Thirsk, We offer Direct Access - no need to see the dentist first. Pros and Cons
Bernese mountain dog rescue ny
Signaler à l’administrateur
BernEdusy 04-05-2019 20:23
Your tongue has the sensation of burning but you havent burned it lately. If you are consistently bothered by this then you have come to the right place.
Burning sensation on roof of mouth
Signaler à l’administrateur
Marquis 24-04-2019 09:55
Since the admin of this website is working, no hesitation very rapidly
it will be renowned, due to its quality contents.

Here is my site ... cialis: http://costofcial.com
Signaler à l’administrateur
BOLtaile 24-04-2019 01:57
I have a lump under the skin in my armpit? | Yahoo Answers
why do i have a lump under my armpit
Signaler à l’administrateur
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é