Tavarn Ty Pwyll

Dans la trousse du webdevelopper, il fait bon retrouver certaines applications, j’ai décidé de vous parler un peu des miennes, en commençant par l’une des dernières arrivées : « LESS »

Ca sert à quoi ?

En gros à gagner du temps. « LESS » permet de « compiler » des feuilles css prêtes à l’emploi à partir de pseudo feuilles css qui sont en quelques sortes les feuilles css du futur.

exemple :

@link_txt: #5D717E;
a {
color: @link_txt;
text-decoration: underline;
outline: none;
}

donnera après le passage de less le code CSS suivant

a {
color: #5D717E;
text-decoration: underline;
outline: none;
}

Comment ça marche ?

Trois solutions s’offrent à vous :

1. Classique
   Installer Ruby
   Installer le Gem de less dans ruby
2. Packagé
   Poser sur votre disque un package ruby + les gems nécessaires + le gem less et utiliser un batch qui permette a tout ce petit monde de communiquer avec votre machine. Je ferais ça un peu plus tard, sinon je vous donnerais les pistes pour le faire…
3. Exécutable
   Via un programme ruby comme erb, créer un version compilé pour less

Nous allons nous concentrer sur le point 1 en environnement windows

Installation de ruby

Télécharger rubyinstaller-1.9.1-p243-preview2.exe à partir de http://rubyinstaller.org/

Dans le menu démarrer de windows lancer le shell de commande ruby et dans la fenêtre qui est apparu saisir : gem install less

une fois l’installation terminée vous devriez pouvoir saisir lessc -v ce qui devrait vous renvoyer le numéro de version de less

Vous voilà prêt à démarrer

Premiers Pas

Pour commencer créons notre premier fichier less, un fichier less ce n’est ni plus ni moins qu’un fichier CSS enrichi

C’est ça la force du produit, c’est que vous n’avez rien à ré apprendre, vous n’avez qu’à enrichir.

@link_txt: #5D717E;
a {
color: @link_txt;
}

Comme vous pouvez le voir c’est du CSS classique mis à part l’utilisation du mot clé : @link_txt. Ce mot clé défini simplement une constante link_txt qui sera remplacé par la valeur sise à côté du : soit #5D717E dans tout le fichier .less

pour générer le code css final je lance donc dans mon shell ruby

lessc [nom_du_fichier]

si je n’ai pas fait d’erreur j’obtiens un fichier [nom_du_fichier].css dans le même répertoire que  [nom_du_fichier].less

qui contient

a {
color: #5D717E;
}

Inclusion de fichier Extérieurs

Une autre possibilité de « LESS » est de permettre l’inclusion de fichier extérieurs via la commande ‘@import « [nom_du_fichier]« . A  la différence de son homologue CSS, la balise permet bien d’inclure le code dans le fichier CSS de destination

ainsi si dans l’exemple de tout à l’heure je créé deux fichier

— a.less —

@link_txt: #5D717E;</p>

— b.less —

@import "a.less";
a {
color: @link_txt;
}

la commande lessc b.less global.css, me donnera bien un fichier global.css avec les éléments de a+b. Ce mode de fonctionnement permet par exemple d’avoir de multiples feuilles less repartissant bien les différents éléments de balisage en catégorie : header, footer pour simplifier la maintenance du code CSS , mais de réunir le tout dans un seul fichier CSS pour soulager les requêtes serveurs.

Imbrication de règles

Il est possible d’écrire les fichiers less avec une vue plus objet/hiérarchique/arborescente, je vous laisse le choix des mots.

ainsi dans mon fichier less je peux definir un id header et un raffinement de cet id au moyen de la class navigation comme ceci ( ‘ala CSS’ )

#header { color: black; }
#header .navigation {
  font-size: 12px;
}

mais je peux aussi l’écrire comme ceci

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
}

ce qui est d’un point de vue « développeur » nettement plus élégant
la ‘distributivité’ du code existe également l’exemple less suivant

#coffret .firstline {
...
.col1,.col2,.col3 { font-size: 13px; }
}

se traduit en css par

#coffret .firstline .col1 { font-size: 13px; }
#coffret .firstline .col2 { font-size: 13px; }
#coffret .firstline .col3 { font-size: 13px; }

encore plus fort

h1, h2, h3 {
  a, p {
    :hover {
      color: red;
    }
  }
}

#all { color: blue; }
#the { color: blue; }
#same { color: blue; }

donne

h1 a:hover { color: red; }
h1 p:hover { color: red; }
h2 a:hover { color: red; }
h2 p:hover { color: red; }
h3 a:hover { color: red; }
h3 p:hover { color: red; }
#all, #the, #same { color: blue; }

Uilisation de variables en mode avancée

il est aussi possible d’effectuer des calculs avec les variables

@a: 2;
@x: @a * @a;

.variables {
  height:  @x + 0px;
}

donne après compilation

.variables { height: 4px; }

notez que l’on peut aussi utiliser des chaînes de caractères

@fonts: "Trebuchet MS", Verdana, sans-serif;
@f: @fonts;

@quotes: "~" "~";
@q: @quotes;

.variables {
  font-family: @f;
  quotes: @q;
}

donnera

.variables {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  quotes: "~" "~";
}

par contre les propriétés des chaînes de caractère Ruby ne sont pas reprises

// test 4
@q: "~"*2; // devrait donner ~~

.variables {
  quotes: @q;
}

génère une erreur

Attention aux unités
Les opérations arithmétiques tiennent compte des unités dans lesquelles elles sont exprimées ainsi dans le fichier ci dessous

@x: 4;
@y: 12em;

.with-variables {
  height: @x + @y;
  width: 12 + @y;
  size: 5cm - @x;
  foo: @x + 1px;
  bar: @x + 1px;
}

.with-variables {
  height: 16em;
  width: 24em;
  size: 1cm;
  foo: 5px;
  bar: 5px;
}

cependant transformer dans le fichier less le @x:4 en @x: 4cm génère une erreur de compilation .

‘Mixins’

Les ‘Mixins’ (personnellement, j’utiliserais le terme d’inclusion), c’est la possibilité d’inclure dans une définition tout ou partie d’une autre définition.
Pour comprendre partons du fichier less suivant

mixin { border: 1px solid black; }
.mixout { border-color: orange; }
.borders { border-style: dashed; }

#theme > .mixin {
  background-color: grey;
}
#container {
  color: black;
  .mixin, .mixout;
  #theme > .mixin;
}

le fichier css résultant sera

mixin { border: 1px solid black; }
.mixout { border-color: orange; }
.borders { border-style: dashed; }
#theme > .mixin { background-color: grey; }
#container {
  color: black;
  border-color: orange;
  background-color: grey;
}

Puissant non ? il est a noté que la règle mixin n’a pas été intégrée, car on demande l’inclusion de .mixin.
Il est même possible d’accéder à un élément précis d’une règle

#defaults {
  @width: 960px;
  @color: black;
  bar: black;
}

.article { color: #294366; }

.comment {
  width: #defaults[@width];
  foo: #defaults['bar'];
  color: .article['color'];
}

si l’element est une variable, alors l’élément doit être entre ‘ sinon il doit être précédé du symbole @

#defaults { bar: black; }
.article { color: #294366; }
.comment {
  width: 960px;
  foo: black;
  color: #294366;
}

Portées des variables

Comme dans la plupart des langages la portées des variables est le contexte, puis on remonte dans le contexte parent si la variable n’existe pas dans le contexte local

ainsi

@var: red;

#header {
	color: @var; //red
}

#page {
  color: @var; // white
  @var: white;
  #header {
    color: @var; // white
  }
}

#header { color: red; }
#page { color: white; }
#page #header { color: white; }

Le mot variable ne me semble pas tout a fait exact le terme constante serait plus judicieux, en effet :

@valeur: 1;
.toto {
	foo: @valeur;
}
@valeur: 3;
.toto2 {
	bar: @valeur;
}

donne contrairement à ce que l’on pourrait croire

.toto { foo: 1; }
.toto2 { bar: 1; }

Ceci est d’ailleurs précisé dans la documentation en ligne.

Une fois définie une valeur n’est plus modifiable tout au moins dans le même contexte, en effet

@mix: #123;
.mixin {
  @mix: #456;
}
.mix_global {
  color: @mix; //
}
.mix_from_mixin {
  color: @mix;
  .mixin;
}

génère le fichier css suivant

.mix_global { color: #112233; }
.mix_from_mixin { color: #445566; }

Conclusion

J’avoue avoir été plus que séduit par le concept, et je ne sais plus faire sans ; j’espère vous avoir convaincu d’y jeter un oeil. Quand à moi, il ne me reste plus qu’à écrire un autre billet montrant l’utilisation de less avec OCSS.