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

1. LESS, JS & WP
for #WPN12

2. RUSSELL FAIR
developer / open source code junkie
r@q21.co

4. 1 LESS joke
LESS != 'more';
LESS $beer != 'happy coder';
LESS $money != 'happy coder';
LESS $time_writing_css == 'happy coder';

7. doing LESS work is good
saves time
easier to navigate
#!watch
drawbacks? slow,

8. more variables = LESS code
@color1: #e4e9c2;
@padding1: 1%;
body { background: @color1; }
.hfeed {
background:@color1;
padding:@padding1;
}

12. custom LESS functions
.recolor( @color4:purple ) {
body.blog {
.hfeed {
background:@color4;
}
}
}
.recolor();

13. native LESS functions
body.blog {
background: saturate(@color2, 90%);
}
.hfeed a {
color: spin(@color2, 20);
}

14. 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% );
}

15. LESS math
.multiplication { margin: @padding1 * 2; }
.division { margin: @padding2 / 2; }
.addition(@width1, @width2) {
width: @width1 + @width2;
}
.subtraction(@width1, @width2) {
width: @width1 - @width2;
}