É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  

Fernando 11-09-2018 22:13
The next time I read a blog, I hope that it does not fail me as
much as this one. I mean, Yes, it was my choice
to read, nonetheless I genuinely believed you would have something useful to talk about.

All I hear is a bunch of whining about something you could fix
if you were not too busy searching for attention.

Also visit my blog post ... Naomi Skin Care Reviews: https://www.kukeleeville.com/phpfox/index.php/blog/4298/yummy-foods-that-produce-acne/
Signaler à l’administrateur
otoqupulup 04-09-2018 19:46
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
ulujkekuyeba 04-09-2018 19:46
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
abubonufes 04-09-2018 19:45
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
ohewolik 04-09-2018 19:28
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
amoercu 04-09-2018 19:25
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
uamixag 04-09-2018 19:20
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
azudueya 04-09-2018 19:16
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
ieobaruluvoyu 04-09-2018 19:09
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
obevupoebee 04-09-2018 19:03
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
unaxomatiz 04-09-2018 18:46
http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor onlinebuycytotec.site.ankor
Signaler à l’administrateur
Cryptobiow 20-08-2018 04:56
Bitcoin tradicionalmente relacionam-se a equipe digitais de dinheiro. Ela vive exclusivamente em formato virtual. Apesar de sua no trocados por produtos, servicos ou convencionais dinheiro.
Bitcoin unique. Ela nao ligado com as atividades dos bancos, nao tem material aspecto, e desde o inicio criada desregulada e descentralizada.
Se simples palavras, o que e o bitcoin e digital dinheiro, que sao extraidas em computacao instrumentos e giram no proprio sistema de seu leis.
bitcoin para paypal
Signaler à l’administrateur
KulSivy 14-08-2018 16:24
Seal armpit brings inconvenience, pulls. To delay trip doctor is not appropriate. Lump under the muscle cavity may become dangerous illness. However more often it is result frequent use deodorants, violation rules personal hygiene, increased sweating. Redness triggers narrow clothing, polluted razor-affiliation, the virus.
i have a lump under my armpit
Discomfort under the arm, redness, lump becoming hot? This is the abscess that should will have to be opened, next take antibiotics. initial stage treat ointments, anti-inflammatory drugs. When the ailment is started, the required surgery.
Signaler à l’administrateur
KulSivy 30-07-2018 19:49
Seal armpit brings inconvenience, pain when moving. to Carry visit doctors is not appropriate. Bulge under the muscle cavity may turn out to be dangerous illness. But often it is result regular use antiperspirants with aluminum, violation rules personal hygiene, intense sweating. Redness triggers narrow blouse, contaminated razor, the infection.
lump under armpit hurts
Pain under the arm, redness, lump becoming warm? This is the boil that will cut from the surgeon, next drink antibiotics. First treat ointments, antibacterial medicines. If the process switched to second stage, the required surgical procedure.
Signaler à l’administrateur
Mirkacink 21-07-2018 10:38
Peels can help to eliminate from most age amendments of the skin cover. Procedures effective at any age, adapted for skin of any type. After superficial peeling disappear minor wrinkles, skin becomes young, without wrinkles. Regeneration – three days. The middle peeling well struggles wrinkles (expression, age, smoothing minor pits, eliminates freckles.
Regeneration – seven days. Profound peeling doing in the beauty clinics. This is maximum effective operation, but requires long term rehabilitation – about thirty days.
chemical peel procedure
Signaler à l’administrateur
KIRATife 13-07-2018 07:22
To determine internal swelling is difficult enough, therefore, consequently, they influence the body for a long time, which threatens the normal fetus. Fluids are dangerous because they break blood circulation. Such situation leads to worsening feeding and the breath baby, created hypoxia.
Fighting such a pathology should be done with the help of correction feeding and special exercises so that water does not stay tissues. If expectant mother is resting, then under the feet better put a cushion or pillow to improve the blood circulation of tired legs. Do not long time to sit or stand, as this leads to stagnation in the body. It is recommended that the knee-elbow position several times a day in order to increase blood flow.
how to reduce swelling during pregnancy
Signaler à l’administrateur

Posez votre question !

Code de sécurité