Ce document présente les fonctionnalités de Less, un préprocesseur CSS, y compris l'utilisation des variables, des règles imbriquées et des opérations. Il fournit des exemples pratiques pour illustrer comment Less peut simplifier l'écriture de CSS en permettant l'héritage et la création de styles modulaires. Enfin, il mentionne les recommandations pour organiser les fichiers de style et des ressources supplémentaires pour apprendre à utiliser Less.

1. LESS, moins de CSS
plus de fun !
Corinne Schillinger
@schillinger - www.inseo.fr

2. Corinne Schillinger

3. KeSAKO
variables règles imbriquées
LESS = CSS + 4 fonctionnalités majeures
héritage opérations

4. Comment Ca Marche
fichier.less
compilateur
fichier.css

5. LES Compilateurs
JS : version officielle - http://lesscss.org/
PHP : lessphp - http://leafo.net/lessphp/
Mac : less.app - http://incident57.com/less/
.Net : dotlesscss - http://www.dotlesscss.org/
WordPress : wp-less - https://wordpress.org/extend/plugins/wp-less/
Symfony : sgLESSPlugin - http://www.symfony-project.org/plugins/
sgLESSPlugin
Ruby : less - http://rubygems.org/gems/less
Rails : more - https://github.com/cloudhead/more

6. Mon 1er fichier less
Un fichier .css est un fichier .less valide
Modifiez : styles.css en styles.less
Et vous avez un fichier .less
o/

7. LES VARIABLES
@color: #7f7f7f;
@path: MonTheme;
@margin : 15px 0;

8. //code less
@color: #404040;
@bg-color: #c9c9c9;
@path: MonTheme;
@margin : 15px 0;
.MonTheme {
margin: @margin;
color: @color;
background: @bg-color url("../img/@path/h2.jpg") 0 0 repeat-x;
}
//code css
.MonTheme {
margin: 15px 0;
color: #404040;
background: #c9c9c9 url("../img/MonTheme/h2.jpg") 0 0 repeat-x;
}

9. LES declarations
imbriquees
//code less
ul#main-nav { //code css
li { ul#main-nav {}
a {} ul#main-nav li {}
} ul#main-nav li a {}
}

10. //code less
ul#main-nav {
margin: 20px 0 0 20px;
list-style: none;
li {
padding: 3px 0;
a { text-decoration: none }
}
}
//code css
ul#main-nav {
margin: 20px 0 0 20px;
list-style: none;
}
ul#main-nav li { padding: 3px 0 }
ul#main-nav li a { text-decoration: none }

11. /!
trop d’imbrication = surcharge inutile
//code less
ul#main-nav {
li {
padding: 3px 0;
a { text-decoration: none }
}
}
//code less
ul#main-nav {
li { padding: 3px 0 }
a { text-decoration: none }
}

12. ‘‘&’’ permet la concaténation à l’élément parent
//code less
@grey: #7f7f7f;
@turquoise: #00bc96;
#main-nav a {
&:link, &:visited { color: @grey }
&.active, &:focus, &:hover, &:active { color: @turquoise }
}
//code css
#main-nav a:link, #main-nav a:visited { color: #7f7f7f }
#main-nav a.active, #main-nav a:focus,
#main-nav a:hover, #main-nav a:active {
color: #00bc96;
}

13. L’heritage
//code less
.border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box { .border-radius }
//code css
.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

14. //code less
.border-radius(@radius: 5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box { .border-radius }
.circle { .border-radius(30px) }
//code css
.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.circle {
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}

15. .border-radius(@tr: 5px, @br: 5px, @bl: 5px, @tl: 5px){
-webkit-border-top-right-radius: @tr;
-webkit-border-bottom-right-radius: @br;
-webkit-border-bottom-left-radius: @bl;
-webkit-border-top-left-radius: @tl;
-moz-border-top-right-radius: @tr;
-moz-border-bottom-right-radius: @br;
-moz-border-bottom-left-radius: @bl;
-moz-border-top-left-radius: @tl;
border-top-right-radius: @tr;
border-bottom-right-radius: @br;
border-bottom-left-radius: @bl;
border-top-left-radius: @tl;
}
.box { .border-radius }
.semi-circle { .border-radius(30px, 0, 0, 30px) }
//code css
...

16. Les operations
//code less
@margin: 30px;
@color: #404040;
h2 {
margin: @margin 0 @margin/2;
color: @color + #404040;
}
//code css
h2 {
margin: 30px 0 15px;
color: #808080;
}

17. //code less
@margin-left: 10px;
@color: #404040;
.n2 {
margin-left: @margin-left*2;
color: @color*2;
}
.n3 {
margin-left: @margin-left*3;
color: @color*3;
}
//code css
.n2 {
margin-left: 20px;
color: #808080;
}
.n3 {
margin-left: 30px;
color: #c0c0c0;
}

18. La Methode daisy
http://romy.tetue.net/methode-daisy
- Romy Duhem-Verdière -
Scinder la feuille de style en plusieurs fichiers :
reset.css - typo.css - grid.css - pages.css
Gain de lisibilité, maintenance facilitée
Concaténer en un seul fichier pour la mise en production

19. Appliquee A less
variables.less - reset.less - typo.less
grid.less - pages.less
@import
styles.less
compilateur
styles.css

20. Pour aller plus loin
LESS Elements
http://lesselements.com
ensemble de class .less
prêtes à l’emploi
.border-radius, .box-shadow, .opacity, ...

21. Merci pour votre attention
Corinne Schillinger
@schillinger - www.inseo.fr