More Related Content
Similar to Less js-&-wp (20)
Less js-&-wp
- 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;
}
- 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;
}