Tutoriaux: Le CSS

Introduction

Je trouve ca lourd (surtout aujourd'hui) de devoir parcourir un (voir plusieurs) fichier(s) CSS pour modifier la couleur d'un élément; voir parfois de dizaines car vous trouvez que je vert ne convient pas aussi bien qu'un bleu pour TOUT les éléments de votre page... et donc vous devez rechercher dans vos CSS toutes les #15FF12; mais aussi les #18FC11; et puis vous trouvez a la fin un #182500; qui vous pourris bien la vie...

heureusement il y a LessCSS...

http://www.lesscss.org

Le tutorial est fait pour la version 1.3.3, mais le code ci-dessous est facilement adaptable à d'autre versions.

De plus LessCSS *peut* vous aider a faire du responsive design (1)...

Mais qu'est ce que c'est...

En deux mot: un préprocesseur CSS. LessCSS est au CSS ce que le PHP est à l'HTML...

Qui n'a jamais rêvé de définir une fois pour toute SA couleur de base, et ensuite de faire des déclinaisons matématique en CSS...

et bien LessCSS est là pour ça (entre autre)...

Vous allez me dire oui, mais mon code est déjà bien avancé et je ne veux pas tout modifier, ben c'est pas très compliqué à utiliser... Même sur des applications bien avancées en développement.

Vous avez deux techniques; le précompilé ou l'interprété à la volée...

Pour le développement je vous conseille le second, pour la production le compilé c'est bien aussi.

Le précompilé ?

Oui, vous écrivez vos LessCSS, puis via une appli Windows/linux voir même en ligne, vous compilé vos code Less en CSS, et vous n'avez plus qu'a modifier la référence CSS (ou a remplacer votre CSS de base par le résultat compilé) et hop le tour est joué.

en ligne voici quelques outils:

http://lesstester.com/

http://www.dopefly.com/less-converter/less-converter.html

A la Volée

C'est la solution que j'utilise aujourd'hui

Dans mon framework personnel (Version 1), j'ai un fichier "header.php" qui contient le début du code d'une page classique (en gros les balises <HTML> <HEAD>, </HEAD> et <BODY>).

voici un extrait de mon <head>:

<HEAD>
<title>Test CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="<? echo _js_.'jquery.min.js'; ?>"></script>
<script src="<? echo _js_.'jquery-ui.min.js'; ?>"></script>
<script src="<? echo _js_.'tabber.js'; ?>"></script>
<script src="<? echo _tiny_mce_ ?>jscripts/tiny_mce/tiny_mce.js"></script >

<link href="<? echo _css_.'main.css'; ?>"    rel="stylesheet" type="text/css">
<link href="<? echo _css_.'login.css'; ?>"    rel="stylesheet" type="text/css">
<link href="<? echo _css_.'gui.css'; ?>"    rel="stylesheet" type="text/css">
<link href="<? echo _css_.'advgui.css'; ?>"    rel="stylesheet" type="text/css">
<link href="<? echo _css_.'menu.css'; ?>"    rel="stylesheet" type="text/css">
<link href="<? echo _css_.'header.css'; ?>"    rel="stylesheet" type="text/css">
<link href="<? echo _css_.'footer.css'; ?>"    rel="stylesheet" type="text/css">
<link href="<? echo _css_.'common.css'; ?>"    rel="stylesheet" type="text/css">
</HEAD>

Je reviendrais sur le chargement des javascript plus tards, ce qui m'interesse se situe dans la partie CSS. j'ai beaucoup de CSS, car mon Framework a évolué avec le temps, de façon anarchique.
Ce fichier php initalise aussi quelques paramêtres vitaux, et contient l'inclusion des CSS natifs de tout le projet (oui TOUT les CSS, donc parfois un joyeux bordel).

J'ai donc adapté ce php pour utiliser LessCSS;

if (!$page[css])
    $page[css]        = 'main';

Puis dans la section <HEAD> </HEAD> elle charge le CSS demandé:

<link rel="stylesheet/less" href="<? echo _css_.$page[css].".less"; ?>" type="text/css"/>

Et enfin le script less:

<script src="js/less-1.3.3.min.js" type="text/javascript"></script>
Le javascript va se charger de lire le fichier less et de le rendre "css" actif.
ce qui fait que notre <HEAD> ressemble a ceci:
<head>
<title>Test CSS/LESS</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet/less" href="css/main.less" type="text/css"/>
<script src="js/less-1.3.3.min.js" type="text/javascript"></script>
</head>

voici les sources .less de cet exemple

common.less

/*
  CSS (c) 2003-2013 Nox-Rhea
*/
//
// basic Color Definition
//
@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
@dark-blue: (@nice-blue - #111);

.rounded-corners (@radius: 5px, @borderwidth: 1px, @bordercolor: #000)
{
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
  border-width: @borderwidth;
  border-color: @bordercolor;
  border-style: solid;
}

main.less

@import "common.less";
@import "menu.css";

#login
{
    border-width: 1px;
    color: @dark-blue;
    .rounded-corners(5px,1px,@light-blue);
    margin: 5px 5px 5px 5px;
    float: left;
    width: 49%;
}

pour résumé, nous avons deux fichiers inclus (via la commande @import) qui contienent toutes les définitions de base de notre css (common.less et menu.css); puis un fichier main.less qui contient les définitions de la page (sur base du fichier common.less), il est intéressant de noté que les fichiers .css (et qui ne contiennent pas de définition LessCSS, sont importés tel quel dans le fichier final; en version javascript les commentaires sont "oubliés" mais en version compilée, les commentaires CSS sont conservés.

Et le résultat dans votre page

/* MENU.CSS est IMPORTE ICI AU COMPLET */

#login {
    border-color: #6C94BE;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    color: #4A729C;
    float: left;
    margin: 5px;
    width: 49%;
}

Vous pouvez voir qu'il y a des optimisations (margin: par exemple) mais surtout que les couleurs sont calculées a partir de la couleur de base "@nice-blue". Si vous référencez une variables qui n'existe pas (plus) vous aurez un message d'erreur:

variable @dark-blue is undefined

in main.less on line 6, column 12:

  •   border-width: 1px;
  •   color: @dark-blue;
  •   .rounded-corners(5px,1px,@light-blue);

Simple non ?

 


(1) Je dis *peut* car je n'ai pas testé le truc à l'heure où j'écris ces lignes... (Il faut impérativement utiliser la version javascript de LessCSS pour que cela fonctionne...)