An overview of LESS, complete with plenty of code samples

1. {LESS}
PRESENTED BY JEFF STAGG

2. Jeff Stagg
 Web developer since 2008
 Focus on .Net / C# / Javascript / HTML
 Defender of Web Standards

3. What is LESS?
 LESS compiles to CSS
@red: #f00;
@green: #0f0;
@blue: #00f;
@radius-size: 10px;
.round-borders(@color) {
-webkit-border-radius: @radius-size;
-moz-border-radius: @radius-size;
border-radius: @radius-size;
border: 5px solid @color;
}
.rounded {
&.red {
.round-borders(@red);
}
&.green {
.round-borders(@green);
}
&.blue {
.round-borders(@blue);
}
}
section>div {
display: inline-block;
width: 100px;
padding: 5px;
margin-left: 20px;
}
.rounded.red {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 5px solid #ff0000;
}
.rounded.green {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 5px solid #00ff00;
}
.rounded.blue {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 5px solid #0000ff;
}
section>div {
display: inline-block;
width: 100px;
padding: 5px;
margin-left: 20px;
}

4. Why LESS?
 CSS sucks
 LESS lets us make CSS components
 DRY pattern

5. Variables

6. Variables
 LESS lets us use variables in our code
 Assign variables by using ‘@variable: value’
 http://codepen.io/jeffstagg/pen/EaqeqZ?editors=110

7. String Variables
 We can store strings as values in variables
 Useful for image URLs
 @imageBaseUrl: ‘/Images/min/’
 http://codepen.io/jeffstagg/pen/zxgmow?editors=110

8. Variable Scope
 Variables have scope local to their current function
 http://codepen.io/jeffstagg/pen/ZYgqQO?editors=110
 http://codepen.io/jeffstagg/pen/emqPvg?editors=110

9. Nesting

10. Nesting Functions
 Organize your CSS
 Makes your code modular
 http://codepen.io/jeffstagg/pen/jEgvvo?editors=110

11. Mixins

12. What are Mixins?
 Functions reusable throughout your styles
 Follows DRY principals

13. Importing Mixins
 Mixins can be imported from files in your project
 @import ‘mixins’;
 https://gist.github.com/jeffstagg/cc6b9ca896a6bd34923d

14. Functions Support Arguments
 Arguments / Parameters can be passed into functions
 .function(@parameter) { color: @parameter; }
 http://codepen.io/jeffstagg/pen/bNXxLm?editors=110

15. Namespaces

16. Namespaces
 Mixins and Functions can be defined in Namespaces
 #namespace { .function(@color) { color: @color; } }
 http://codepen.io/jeffstagg/pen/qEeQbg?editors=110

17. Compiling LESS

18. Compiling LESS
 Client-Side (Javascript)
 Server-Side (Gulp/Grunt, Web Essentials, DotLESS, Koala)

19. Less.js
 LESS can be compiled client-side by using less.js
 https://gist.github.com/jeffstagg/2d4a87ee3d9d2c1559e2

20. Gulp
 NodeJS task runners like Grunt or Gulp can compile LESS server-side
 https://gist.github.com/jeffstagg/2585aee8899b75ed4eb4

21. Web Essentials for Visual Studio
 Web Essentials extension can compile LESS in real-time
 https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-
9df7-0f2a504ca361

22. Other Tools
 DotLESS
 Koala