Your SlideShare is downloading. ×
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

6,496
views

Published on

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

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

Published in: Technology

0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,496
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
104
Comments
0
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. LESS, moins de CSS plus de fun ! Corinne Schillinger @schillinger - www.inseo.fr
  • 2. Corinne Schillinger
  • 3. KeSAKOvariables règles imbriquées LESS = CSS + 4 fonctionnalités majeureshéritage opérations
  • 4. Comment Ca Marchefichier.less compilateur fichier.css
  • 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. 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 lessul#main-nav { //code css li { ul#main-nav {} a {} ul#main-nav li {} } ul#main-nav li a {}}
  • 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. /! 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. ‘‘&’’ 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éeConcaté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