Conférence résentée par Corinne Schillinger à l'occasion de l'édition 2011 de la Kiwiparty.

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