<h1>Démonstration LESS</h1> <p>Ce contenu HTML est mis en forme avec LESS. La couleur de base est définie une seule fois. Essayez de la modifier (ex: #ef8b0a) et cliquez sur Run.</p> <table class="exemple"> <thead> <tr> <th>Année</th> <th>Réalisateur</th> <th>Film</th> </tr> </thead> <tbody> <tr> <td>2010</td> <td>Kathryn Bigelow</td> <td>Démineurs</td> </tr> <tr> <td>2011</td> <td>Tom Hooper</td> <td>Le Discours d'un roi</td> </tr> <tr> <td>2012</td> <td>Michel Hazanavicius</td> <td>The Artist</td> </tr> <tr> <td>2013</td> <td>Ang Lee</td> <td>L'Odyssée de Pi</td> </tr> <tr> <td>2014</td> <td>Alfonso Cuarón</td> <td>Gravity</td> </tr> <tr> <td>2015</td> <td>Alejandro González Iñárritu</td> <td>Birdman</td> </tr> </tbody> </table>
/*baseColor est une variable. Essayez de la modifier (ex: #ef8b0a) et cliquez sur Run.*/ @baseColor: #4679BD; body{ color: @baseColor; font-family: 'Segoe UI', Verdana, Helvetica, 'Sans Serif'; } table.exemple { border: 1px solid @baseColor; border-collapse: collapse; thead { tr { th { /*On utilise la valeur définie plus haut*/ background-color : @baseColor; color: white; padding: .5em; text-align: left; } } } tbody { tr { td { background-color : white; color : @baseColor; padding: .5em; } /*Survol de la ligne. Le & est une syntaxe importante mais pas bien compliquée décrite ici : http://lesscss.org/features/#parent-selectors-feature.*/ &:hover { td { background-color : lighten(@baseColor, 35%); /*lighten est une des nombreuses fonctions de LESS. Celle ci permet d'éclaircir une couleur.*/ } } } } }