Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LESS, moins de CSS  plus de fun !       Corinne Schillinger    @schillinger - www.inseo.fr
Corinne Schillinger
KeSAKOvariables                  règles imbriquées  LESS = CSS + 4 fonctionnalités majeureshéritage                       ...
Comment Ca Marchefichier.less              compilateur                            fichier.css
LES CompilateursJS : version officielle - http://lesscss.org/PHP : lessphp - http://leafo.net/lessphp/Mac : less.app - http...
Mon 1er fichier less  Un fichier .css est un fichier .less valide     Modifiez : styles.css en styles.less        Et vous ave...
LES VARIABLES  @color: #7f7f7f;  @path: MonTheme;  @margin : 15px 0;
//code less@color: #404040;@bg-color: #c9c9c9;@path: MonTheme;@margin : 15px 0;.MonTheme {  margin: @margin;  color: @colo...
LES declarations       imbriquees//code lessul#main-nav {   //code css    li {        ul#main-nav {}        a {}    ul#mai...
//code lessul#main-nav {  margin: 20px 0 0 20px;  list-style: none;  li {    padding: 3px 0;    a { text-decoration: none ...
/!       trop d’imbrication = surcharge inutile//code lessul#main-nav {  li {    padding: 3px 0;    a { text-decoration: n...
‘‘&’’ permet la concaténation à l’élément parent//code less@grey: #7f7f7f;@turquoise: #00bc96;#main-nav a {  &:link, &:vis...
L’heritage//code less.border-radius {    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;}.b...
//code less.border-radius(@radius: 5px){  -webkit-border-radius: @radius;  -moz-border-radius: @radius;  border-radius: @r...
.border-radius(@tr: 5px, @br: 5px, @bl: 5px, @tl: 5px){  -webkit-border-top-right-radius: @tr;  -webkit-border-bottom-righ...
Les operations//code less@margin: 30px;@color: #404040;h2 {    margin: @margin 0 @margin/2;    color: @color + #404040;}  ...
//code less @margin-left: 10px; @color: #404040; .n2 {   margin-left: @margin-left*2;   color: @color*2; } .n3 {   margin-...
La Methode daisy              http://romy.tetue.net/methode-daisy                  - Romy Duhem-Verdière -    Scinder la f...
Appliquee A less   variables.less - reset.less - typo.less           grid.less - pages.less@import                styles.l...
Pour aller plus loin               LESS Elements          http://lesselements.com           ensemble de class .less       ...
Merci pour votre attention         Corinne Schillinger      @schillinger - www.inseo.fr
Upcoming SlideShare
Loading in …5
×

LESS : moins de CSS, plus de fun ! (KiwiParty 2011)

7,759 views

Published on

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

Published in: Technology
  • Be the first to comment

LESS : moins de CSS, plus de fun ! (KiwiParty 2011)

  1. 1. LESS, moins de CSS plus de fun ! Corinne Schillinger @schillinger - www.inseo.fr
  2. 2. Corinne Schillinger
  3. 3. KeSAKOvariables règles imbriquées LESS = CSS + 4 fonctionnalités majeureshéritage opérations
  4. 4. Comment Ca Marchefichier.less compilateur fichier.css
  5. 5. LES CompilateursJS : 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/sgLESSPluginRuby : less - http://rubygems.org/gems/lessRails : more - https://github.com/cloudhead/more
  6. 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. 7. LES VARIABLES @color: #7f7f7f; @path: MonTheme; @margin : 15px 0;
  8. 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. 9. LES declarations imbriquees//code lessul#main-nav { //code css li { ul#main-nav {} a {} ul#main-nav li {} } ul#main-nav li a {}}
  10. 10. //code lessul#main-nav { margin: 20px 0 0 20px; list-style: none; li { padding: 3px 0; a { text-decoration: none } }}//code cssul#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. 11. /! trop d’imbrication = surcharge inutile//code lessul#main-nav { li { padding: 3px 0; a { text-decoration: none } }} //code less ul#main-nav { li { padding: 3px 0 } a { text-decoration: none } }
  12. 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. 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. 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. 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. 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. 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. 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éeConcaténer en un seul fichier pour la mise en production
  19. 19. Appliquee A less variables.less - reset.less - typo.less grid.less - pages.less@import styles.less compilateur styles.css
  20. 20. Pour aller plus loin LESS Elements http://lesselements.com ensemble de class .less prêtes à l’emploi .border-radius, .box-shadow, .opacity, ...
  21. 21. Merci pour votre attention Corinne Schillinger @schillinger - www.inseo.fr

×