Less js-&-wp

1,201 views
1,112 views

Published on

Examples of using LESS in WordPress, prepared for WordCamp Nashville 2012 #wcn12

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,201
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Less js-&-wp

  1. 1. LESS, JS & WPfor #WPN12
  2. 2. RUSSELL FAIRdeveloper / open source code junkier@q21.co
  3. 3. 1 LESS jokeLESS != more;LESS $beer != happy coder;LESS $money != happy coder;LESS $time_writing_css == happy coder;
  4. 4. doing LESS work is goodsaves timeeasier to navigate#!watchdrawbacks? slow,
  5. 5. more variables = LESS code@color1: #e4e9c2;@padding1: 1%;body { background: @color1; }.hfeed { background:@color1; padding:@padding1;}
  6. 6. custom LESS functions.recolor( @color4:purple ) { body.blog { .hfeed { background:@color4; } }}.recolor();
  7. 7. native LESS functionsbody.blog { background: saturate(@color2, 90%);}.hfeed a { color: spin(@color2, 20);}
  8. 8. more native LESS functions.hentry:nth-child(3n+1) { background: lighten( @color2 , 20% );}.hentry:nth-child(3n+2) { background: darken( @color2 , 5% );}.hentry:nth-child(3n+3) { background: saturate( spin( @color3, -50), 30% );}
  9. 9. LESS math.multiplication { margin: @padding1 * 2; }.division { margin: @padding2 / 2; }.addition(@width1, @width2) { width: @width1 + @width2;}.subtraction(@width1, @width2) { width: @width1 - @width2;}

×