{"id":666,"date":"2012-05-02T10:30:04","date_gmt":"2012-05-02T08:30:04","guid":{"rendered":"https:\/\/www.ideematic.com\/actualites\/?p=666"},"modified":"2022-03-01T11:39:30","modified_gmt":"2022-03-01T10:39:30","slug":"less","status":"publish","type":"post","link":"https:\/\/www.ideematic.com\/actualites\/2012\/05\/less\/","title":{"rendered":"LESS : un langage pour simplifier les CSS"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]<\/p>\n

Vous en avez assez de vous r\u00e9p\u00e9ter dans vos feuilles de style ? Le langage LESS<\/em> permet de simplifier leur \u00e9criture. Bas\u00e9 sur le langage CSS<\/strong>, LESS<\/em> am\u00e8ne ce qui faisait d\u00e9faut aux Cascading Style Sheets et ajoute une bonne dose de dynamisme<\/strong> tr\u00e8s appr\u00e9ciable.
\nLes fichiers \u00e9crits en langage LESS<\/em> vont porter l\u2019extension .less<\/em> et auront une syntaxe et des fonctionnalit\u00e9s propres, que l\u2019on verra un peu plus loin dans cet article.
\n
\nIl faut dans un premier temps mettre en place les bases pour pouvoir utiliser ce nouveau langage. En effet, afin que les fichiers .less<\/em> soient interpr\u00e9tables par les navigateurs web, il faut les compiler<\/strong> en .css<\/em> du c\u00f4t\u00e9 client ou du c\u00f4t\u00e9 serveur. Pour ce faire, il y a quatre possibilit\u00e9s : la m\u00e9thode la plus rapide utilise Javascript<\/strong>, il suffit de t\u00e9l\u00e9charger le fichier less.js<\/em> disponible sur lesscss.org<\/a> et de rajouter\/modifier deux lignes dans votre fichier HTML:<\/p>\n

\r\n<link rel="stylesheet\/less" type="text\/css"\r\nhref="style.less">\r\n<script type="text\/javascript" src="less.js"><\/script>\r\n<\/pre>\n
Une autre solution pour l\u2019impl\u00e9mentation du langage c\u00f4t\u00e9 serveur utilise PHP<\/strong> et le compilateur lessphp<\/a>. Pour la mise en place de cette solution et la pr\u00e9sentation des deux autres m\u00e9thodes de compilation, je vous laisse lire la partie \u00abMise en place de LESS\u00bb de l\u2019article \u00abLESS CSS: le langage qui a du style<\/a>\u00bb.<\/p>\n
Avantages et fonctionnalit\u00e9s<\/h2>\n
Les avantages de ce nouveau langage sont les suivants: meilleure organisation<\/strong> et donc lisibilit\u00e9<\/strong> des feuilles de style, rapidit\u00e9<\/strong> de d\u00e9veloppement et rapidit\u00e9 de modification.
\nEn effet, LESS<\/em> offre de nouvelles fonctionnalit\u00e9s tr\u00e8s utiles. Tout d\u2019abord, les variables <\/strong>qui peuvent \u00eatre r\u00e9utilis\u00e9es aussi souvent que n\u00e9cessaire:<\/p>\n
\r\n@var: 100px;\r\n@blue: #046380;\r\n\r\n#block {\r\nbackground-color: @blue;\r\nheight: @var; }\r\n<\/pre>\n
Les op\u00e9rations<\/strong> sont aussi possibles (* \/ – +):<\/p>\n
\r\n#header {\r\ncolor: @blue + #111111;   \/\/#157391\r\nwidth: @var * 4;          \/\/400px\r\nheight: @var \/ 2; }\r\n<\/pre>\n
Les mixins<\/strong> sont des ensembles de propri\u00e9t\u00e9s qui peuvent \u00eatre stock\u00e9s comme les variables:<\/p>\n
\r\n.blue-div {\r\nbackground-color: @blue;\r\nwidth: @var;\r\nheight: @var \/ 2; }\r\n\r\n.real {\r\n.blue-div;\r\nfont-size: 14px; }\r\n<\/pre>\n
Les r\u00e8gles imbriqu\u00e9es <\/strong>permettent d\u2019indenter les \u00e9l\u00e9ments ayant un point commun:<\/p>\n
\r\n#footer {\r\nh2 {                      \/\/#footer h2\r\nfont-size: 20px;\r\nfont-weight: bold; }\r\np {                       \/\/#footer p\r\nfont-size: 14px;\r\na {                       \/\/#footer p a\r\ntext-decoration: none; } } }\r\n<\/pre>\n
De plus, la m\u00e9thode de compilation Javascript permet l\u2019utilisation de variables js<\/strong>:<\/p>\n
\r\np {\r\nfont-size: 'window.innerHeight' * 0.2 }\r\n<\/pre>\n
Et lessphp permet l\u2019utilisation de fonctions<\/strong>:<\/p>\n
\r\n.rounded-corners (@radius) {\r\nborder-radius: @radius;\r\n-webkit-border-radius: @radius;\r\n-moz-border-radius: @radius; }\r\n\r\n.rounded-div {\r\n.rounded-corner(15px); }\r\n<\/pre>\n
Autres langages<\/h2>\n
Il existe d\u2019autres langages qui permettent \u00e9galement de simplifier l\u2019\u00e9criture des feuilles de style :<\/p>\n