2mai/111

LESS, le js qui réinvente la façon de faire de la css !

2766154718601541

logo LESS

Hier j'ai découvert, à ma grande satisfaction l'existence de LESS, une nouvelle façon de faire de la css.

Pour ma part quand je pense à la css, je pense à quelque chose de très répétitif parfois, qui est dû au manque d'automatisation de certaines tâches. C'est la qu'intervient LESS. Avec on peut faire de la css dynamiquement, avec des variables et des fonctions.

Avant de voir tout cela je vais vous montrer comment intégrer tout ça sur votre site internet.

Tout d'abord il y a l'intégration coté serveur grâce à node.js, si cela vous intéresse je vous laisse aller sur le site pour voir comment faire : LESS server-side usage.

Ici je vais vous montrer comment l'intégrer coté client, grâce a less.js. Vous devez faire un lien vers votre fichier dont l'extension sera .less et non .css ainsi qu'un lien vers less.js:

<link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="less.js" type="text/javascript"></script>

Il ne faut pas oublier que lorsque vous télécharger le js il ressemble à less-1.0.41.min.js, alors soit vous changer son nom en less.js soit vous changer le lien (personnellement j'ai changé le lien, comme ça je connais quelle version de less.js j'utilise).

Une autre manière de faire est de compiler soit même le code, j'ai trouvé ca pour os X : http://incident57.com/less/, un plugin pour coda (toujours os X) http://incident57.com/coda/index2.php. Bon je n'utilise pas os X, mais sur archlinux il m'a suffit de faire un ptit "yaourt less css" et trouver un compilateur, il en existe peut être ailleurs aussi, je vous laisse chercher au cas où la solution javascript ne vous plait pas.

Maintenant que cela est fait on peut passer au fun et commencer à voir ce que LESS apporte.

Et comme son nom l'indique on a besoin de moins de ligne de code et donc de moins de temps pour faire ce que l'on souhaite. La première chose qui me permet de dire ça c'est la possibilité d'utiliser des variables, et comme un exemple est plus parlant que du blabla :

@vert: #BAC99F;
@ombre-marron: #8A8966;
@jaune-orange: #F2B530;
.pixel {
	font-family: "MunroRegular", Calibri, "Helvetica Neue", Arial, sans-serif;	
	font-weight: bold;
	text-shadow: 1px 1px 0 #000000, 2px 2px 0 @ombre-marron, 3px 3px 0 @ombre-marron, 4px 4px 0 @ombre-marron, 5px 5px 0 @ombre-marron;
	color: @vert;
}

Ce qui nous donne en css normale :

.pixel {
	font-family: "MunroRegular", Calibri, "Helvetica Neue", Arial, sans-serif;	
	font-weight: bold;
	text-shadow: 1px 1px 0 #000000, 2px 2px 0 #8A8966, 3px 3px 0 #8A8966, 4px 4px 0 #8A8966, 5px 5px 0 #8A8966;
	color: #BAC99F;
}

En mettant de bon noms de variables on peut ainsi rendre le code plus compréhensible (à moins que vous ne compreniez l'hexadécimal...).

Mais si il n'y avait que cette fonctionnalité cela n'aurait peut être pas valu le coup de s'y intéresser. Laissez-moi vous montrer une des fonctionnalité qui m'a fait penser à "je le veux!".
Comme d'habitude mieux vaut un exemple, pour cela je vais reprendre mon bout de code, et suivez bien car cette fois je vais vous montrer deux fonctionnalités !

.logo a,
nav a{	
	.pixel;
	font-size: 1.5em;	

	&amp;:hover{
		text-decoration:none;
		color: @jaune-orange;
	}
}

Et oui on peut réutiliser les propriétés d'une classe dans une autre ! On peut aussi ajouter un pseudo-élément, ce qui nous permet d'éviter de devoir doubler les propriétés (une sans le hover, une avec le hover).

Enfin j'aimerais vous parler de la fonctionnalité qui m'a le plus enthousiasmé : la possibilité d'imbriquer ! Cette fois je vais prendre un exemple du site officiel :

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Ce qui donne en css :

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

Personnellement je trouve cette façon de faire bien plus intuitive et qui respecte plus facilement la hiérarchie de votre page.

Maintenant que vous avez un petit aperçu, je pense qu'il est temps d'aller tester tout ça, c'est par ici que ça se passe : http://lesscss.org/, et vous trouverez d'autres fonctionnalités telle qu'assombrir une couleur, la désaturer

Le seul reproche que je peux lui faire, c'est que si on fait une erreur dans son code ça casse quasiment tout, m'enfin c'est pas plus mal ça permet de repérer directement si on a fait une erreur.

ps : vous pouvez importer de cette manière : @import "lib.less"; (voir importer un .css), malheureusement je ne sais pas pourquoi je n'ai pas réussis à le faire avec une url externe... mais bon il suffit de le faire dans une css normale et voila.

Commentaires (1) Trackbacks (0)
  1. Merci pour le post bat-bat !
    Je vais tester les applis MAC OS pour voir ce que ça donne.

    Utiliser une variable sur un autre attribut ? NEED.
    Imbriquer des éléments ? SUR-NEED.
    Je commence à en avoir ras le cul d’avoir des codes à rallonge parce que tel truc marche sur ul et pas sur li, ou que truc est en hover et pas l’autre. Bref.
    J’espère juste que j’arriverai à m’y faire :)


Laisser un commentaire


CommentLuv badge

Aucun trackbacks pour l'instant