écrivez votre CSS avec LESS pour gagner en productivité et souplesse

Si vous trouvez fastidieux la rédaction de vos mises en pages CSS, LESS va changer votre vie. Comme son nom l’indique LESS nous permet d’écrire beaucoup moins de CSS. Avec LESS, inspiré de SASS, nous écrivons des feuilles de style dynamiques. Il est par exemple possible d’importer dans une classe une classe abstraite. Nous pouvons également déclarer des constantes et les utiliser dans nos classes. Ces possibilités et d’autres, comme la possibilité de calculer des dimensions, nous font gagner en productivité, d’autant plus que l’apprentissage de LESS est très intuitif.
Avec LESS, nous écrivons des feuilles de style dont l’extension est .less. Le fichier peut-être compilé sur le serveur, via un compilateur, ou traduit en css côté client avec l’ajout d’un fichier javascript dans nos pages. Pour l’exemple suivant, j’ai choisi cette dernière solution.
Le fichier javascript est à télécharger ici: http://lesscss.org/

Voici notre feuille de styles.less

/* Importation */
@import 'styleToImport.less';

/* variables */
@blue: #17B6FF;
@rose: #EEDDFF;
@blueclair: #55DDFF;
@marginDefault: 20px;
@heightDefault: 100px;
@largeur: 25%;

/* classes abstraites */
.border-radius(@radius: 10px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.marginAndHeight{margin:@marginDefault; height:@heightDefault;}

/* déclarations */
body{ background: @rose; }

// les containers

#container { 
    background: @blue; 
    .border-radius; 
    .marginAndHeight;
}

#container2{ 
    background: @blueclair; 
    .border-radius(50px); 
    .marginAndHeight;}

#container3{ 
    background: @blueclair; 
    margin:@marginDefault;
    #a1{
        color:red;
    }
    #a2{
        color:orange;
    }
}

#container4{
    // operation
    width:25%+@largeur;
    background:@greenExplosif;
}

la feuille de style importée styleToImport.less :

@greenExplosif: #00FFDD;

et enfin notre page html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8"> 
        <title>Test LESS</title>
        <link rel="stylesheet/less" type="text/css" href="css/styles.less" />
        <script src="js/less-1.7.3.min.js" type="text/javascript"></script>

    </head>
    <body>

        <div id="container">
            Mon Texte
        </div>
        
        <div id="container2">
            Mon Texte Mon Texte Mon Texte Mon Texte Mon Texte Mon Texte
        </div>
        
        <div id="container3">
            <div id="a1">
                Mon Texte Mon Texte Mon Texte Mon Texte Mon Texte Mon Texte
            </div>
            
            <div id="a2">
                Mon Texte Mon Texte Mon Texte Mon Texte Mon Texte Mon Texte
            </div>
        </div>
        
        <div id="container4">
            Mon Texte Mon Texte
        </div>
    </body>

</html>

Vous pouvez observer cet exemple ici.

Pour plus d’informations, rendez-vous sur le site officiel de LESS: http://lesscss.org. Vous découvrirez notamment que LESS propose également des fonctions pour par exemple manipuler les couleurs.

lesscss

le logo de LessCss

Publié dans CSS

quand j’aurai le temps

  • les filtres wordpress
  • plugin wordpress et enregistrement de données
  • les wordpress custom post type
  • la bdd d'un blog wordpress
  • la balise more de wp
  • personnaliser une galerie wp
  • gérer les longueurs des extraits de wp
  • les animations css3
  • le memento symphony2
  • le squelette d'une page html5
  • liste sur plusieurs colonnes
  • le responsive design
  • exemple d'un jeu basique en html5
  • la réplication des bases de données
  • mettre en place une architecture en silo avec wp
  • parser un fichier xml (donc un rss) avec php5
  • mettre en place lightbox sans plugin
  • améliorer les performances de son wp
  • ajouter un bouton à l'éditeur de texte de wp
  • ...