out through the winter throat

out through the winter throat le blog de Anahkiasen.

LessCSS : mon coup de cœur du moment

Je ne parle pas beaucoup de webdesign et de programmation sur mon blog. Pendant longtemps la raison a été que je ne me sentais pas forcément à l’aise avec ce que je faisais - pas assez au point par rapport aux nombreux standarts du web et à la qualité de ce qui se faisait ailleurs. Depuis le travail en agence m’a fait énormément progresser : moi qui n’avait à l’origine que quelques lointaines connaissances en PHP, ai désormais codé mon propre framework pour les sites qu’on me demande de faire. Avec gestion des templates, mise en cache des pages, code orienté SEO avec URL Rewriting et consorts, gestion du multilingue, admin intégrée etc. Le tout en OOP et conforme aux standars actuels du web (xHTML/HTML5/CSS3 et des touches de jQuery).

Le tout est plus formaté à mes propres besoins qu’à un usage public mais reste que depuis mon entrée dans le monde du travail, j’ai énormément progressé, principalement parce que je suis curieux et que j’adore apprendre sans cesse de nouvelles choses. Ma découverte du moment ? LessCSS.
Il n’est pas rare que dès que quelqu’un découvre ou redécouvre quelque chose de nouveau en webdesign, tout le monde s’emballe du jour au lendemain (voir le cas des CSS Media Queries). LessCss est à l’origine une extension Ruby qui propose d’enrichir le langage CSS via un panel de fonctions qui jusque là manquaient cruellement - le but étant de rendre le langage CSS plus flexible et lisible. Malgré son énorme potentiel (tout comme SASS, une extension CSS du même genre), la contrainte du langage Ruby a fait que le tout est jusqu’à peu resté dans l’ombre. Ce qui a changé il y a peu justement ? C’est que LessCSS est désormais proposé comme une script Javascript. Ça veut dire que concrètement tout ce qu’il y a à modifier dans son code c’est ça :

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>
<script src=”less.js” type=”text/javascript”></script>

Il suffit de changer l’extension de sa feuille de style par .less et de joindre le fichier en ligne LessCSS, et c’est tout. On a une extension CSS portative, facile à intégrer, et universelle. Mais qu’apporte concrètement LESS pour ceux qui ne connaissent pas ? Pour peu que vous ayez un peu de connaissances en CSS, voici un exemple de code LESS que vous devriez comprendre et qui vous donnera un aperçu de ce qu’on peut faire :

// Fonctions
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha)
{
	@val: @x @y @blur rgba(0, 0, 0, @alpha);

	box-shadow:         @val;
	-webkit-box-shadow: @val;
	-moz-box-shadow:    @val;
}

// Mixins
.gras
{
	font-weight: 900;
	text-decoration: underline;
}

// Blocs principaux
div
{
	@base: #f938ab;

  	.gras;
  	color:        saturate(@base, 5%);
  	border-color: lighten(@base, 30%);

	a
	{
		text-decoration: none;

		&:hover { color: red; }
		&:active { color: blue; }
	}
	p.introduction
	{
		background-color: @base - #333;
		.box-shadow(0, 0, 5px, 0.4);

		strong { .gras }
	}
}

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

Création de fonctions, de variables, de mixins (des propriétés que l’on pré-créer et ensuite réattribuer), mathématiques des couleurs, nesting des propriétés, et j’en passe. Le joli petit site officiel détaille mieux la chose que moi (et avec de la coloration de code surtout), toujours est-il qu’une fois qu’on y a goûté il est dur de s’en passer. Les possibilités sont vraiment nombreuses, comme par exemple cette grille dynamique en LESS.

La cerise sur le gâteau c’est - pour les soucieux de l’infime temps de calcul de LESS - les nombreux compileurs gratuits et multiplateformes qu’il existe, comme LESS.app qui vous demande un dossier de projet et qui ensuite compile des fichiers .css propres et valides en réel à mesure que vous travaillez sur vos .less. On a donc là une extension de langage qui peut-être à la fois vu comme une aide au code ou/et comme une extension matérialisant vos rêves les plus fous de design dynamique.
Je ne sais pas ce que vous allez en penser, peut-être des gens plus experimentés se prononceront-ils sur des défauts majeurs m’ayant échappés, mais pour l’instant LESS c’est mon petit coup de cœur et je ne suis pas seul.

Tags: , , ,

13 commentaires pour “LessCSS : mon coup de cœur du moment”

  1. Thermostat dit :

    C’est très joli, par contre centrer à droite c’est vraiment une grosse idée de merde pour ceux qui ont un grand 16/9.

  2. Anahkiasen dit :

    Ouais j’ai jamais trop pris le temps de finir mon design, j’ai un peu avancé la dernière fois mais c’est toujours vachement en retard par rapport à ce que je sais faire et au niveau de l’ergonomie etc. Je corrigerai un jour.

  3. JiHeM dit :

    “Centrer à droite”, tout un concept Thermostat.

  4. divide dit :

    Un concept Hervé Morin je dirais.

  5. Thermostat dit :

    Oui Jihem, centrer, tu sais, le synonyme de mots comme axer, ajuster ou cadrer.

  6. e-t172 dit :

    Y’a Sass aussi.

  7. Anahkiasen dit :

    J’évoque SASS dans mon article effectivement et j’étais tombé dessus avant LESS. Mais leur site étant beaucoup plus fouillis et complexe, je n’ai trouvé nul part précisé que SASS ne nécessitait pas Ruby, ce que LESS précise sur sa première page.
    Après, les deux sont quasi-équivalents, il y a vraiment peu de différence. Ce que je trouve intéressant par contre c’est le fait qu’on ait deux alternatives, ça prouve d’un côté qu’il y a un besoin qui s’est crée pour une évolution de CSS qui ne se limite pas à une poignée de nouveaux sélecteurs et deux trois propriétés en plus.

  8. e-t172 dit :

    Anahkiasen a dit :
    J’évoque SASS dans mon article effectivement et j’étais tombé dessus avant LESS.

    Autant pour moi, ça m’apprendra à survoler avant de commenter.

  9. Mousse dit :

    En fait, le point fort de SASS, c’est l’utilisation de COMPASS, qui est juste énorme. Un seul outils pour compresser/valider JS/CSS/Images… d’un projet au complet, c’est super pratique.

    Par contre, je prefere la syntaxe de LESS, un peut plus clair que celle de SASS, et la possibilité d’utiliser un compilateur JS pour le dev (pour ceux qui n’ont pas de Mac).

  10. darkalex dit :

    Less couplé au bootstrap de twitter ça donne un sacré coup de pouce pour monter des “maquettes” de pages rapidement et qui sont pas moches pour autant : http://twitter.github.com/bootstrap/

  11. Mousse dit :

    Dans le même genre que Bootstrap, y’a Foundation, de Zurb, qui gère aussi les design mobile/tablettes, le prototypage… : http://foundation.zurb.com/

  12. JiHeM dit :

    Thermostat a dit :
    Oui Jihem, centrer, tu sais, le synonyme de mots comme axer, ajuster ou cadrer.

    Non, le vrai mot que tu cherchais c’est “aligner”, comme dans “aligner à droite”. Mais c’est pas grave, hein.

  13. MatTo dit :

    J’ai réussi à faire un peu de forcing pour qu’on l’utilise dans ma boite, même si c’est pas forcément pratique une fois le site en prod et que potentiellement ton client a la main sur les fichiers. Du coup on l’utilise essentiellement en dev, et pour l’instant dans sa solution .js, pas app locale, pour pouvoir bosser sans trop de contraintes machine.
    Difficile aujourd’hui de bosser sans sur les projets. De même, comme en parle darkalex, couplé à bootstrap, ça fait le café, génération de grille à la volée, variables, classes paramétrées, c’est la fête.

    Les préprocesseurs css ont la côte et c’est bien partit pour durer, tellement que google a lancé le sien
    http://code.google.com/p/closure-stylesheets/

Laisser un commentaire

Si vous avez un compte sur WeFrag, connectez-vous pour publier un commentaire.

Vous pouvez, entre autres, utiliser les tags XHTML suivant :
<a href="" title="">...</a>,<b>...</b>,<blockquote cite="">...</blockquote>,<code>...</code>,<i>...</i>