In brief, in this presentation at That Conference I tried to illustrates why you should be using LESS in your current & future projects, an overview of it's features and make you a pro :D CSS is an amazing language that keeps evolving and incorporating more and more awesome features; however, utilizing LESS will extend CSS with dynamic behavior like variables, mixins, operations and functions thus adding even more *awesomeness* to this language and smoothing out your workflow. If you missed my presentation, still give it a shot, the *variables* alone will make it worth while!

1. LESS
  

2. Semantics,
LESS & Sarcasm
 :
  |   
VINCENT BASKERVILLE | VP of PRODUCT

3. wtf
is less?
VINCENT BASKERVILLE | VP of PRODUCT

4. less [less]
noun
1. stylesheet language that extends CSS with
dynamic behavior.
2. pure awesomeness.
VINCENT BASKERVILLE | VP of PRODUCT

5. VINCENT BASKERVILLE | VP of PRODUCT

6. css still right?
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
VINCENT BASKERVILLE | VP of PRODUCT

7. se•man•tic [si-man-tik]
adjective
1. of, pertaining to, or arising from the different
meanings of words or other symbols: semantic
change; semantic confusion.
2. of or pertaining to semantics.
VINCENT BASKERVILLE | VP of PRODUCT

8. div+id/class = no semantic value HTML5 tags = rich semantic value
VINCENT BASKERVILLE | VP of PRODUCT

9. the div ! span elements, in conjunction
with the id ! class attributes, offer a
generic structure to documents. they
define content to be inline or block"
level but impose no other
presentational idioms on the content.
!WORLD WIDE WEB CONSORTIUM
VINCENT BASKERVILLE | VP of PRODUCT

10. why you
should be
using less
VINCENT BASKERVILLE | VP of PRODUCT

11.  
 
•    
 
•  

•     
• 
 
VINCENT BASKERVILLE | VP of PRODUCT

12.  
 
•    
 
•   

•    

VINCENT BASKERVILLE | VP of PRODUCT

13. browser prefixes
.round_corners (@radius: 20px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
VINCENT BASKERVILLE | VP of PRODUCT

14.  
 
•  -
•
• 
• 
VINCENT BASKERVILLE | VP of PRODUCT

15. what’s
inside
VINCENT BASKERVILLE | VP of PRODUCT

16. Variables
// LESS /* Compiled CSS */
@color: #4D926F; #header {
color: #4D926F;
#header { }
color: @color; h2 {
} color: #4D926F;
h2 { }
color: @color;
}
VINCENT BASKERVILLE | VP of PRODUCT

17. .bordered {
mixins
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
+ border-bottom: solid 2px black;
= }
.post a {
#menu a {
color: red;
color: #111;
border-top: dotted 1px black;
.bordered;
border-bottom: solid 2px black;
}
}
.post a {
color: red;
.bordered;
}
VINCENT BASKERVILLE | VP of PRODUCT

18. nesting
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover {
text-decoration: none
}
}
} //#header
VINCENT BASKERVILLE | VP of PRODUCT

19. @arguments
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
.box-shadow {
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
}
VINCENT BASKERVILLE | VP of PRODUCT

20. operations
#page_title {
font-size: @headerSize * .5;
}
.logo {
width: @full_page / 2;
}
} //#page_title
VINCENT BASKERVILLE | VP of PRODUCT

21. eff sass &
haml
VINCENT BASKERVILLE | VP of PRODUCT

22. Sass, SCSS (sassy CSS) Haml
Haml takes your gross, ugly templates and
replaces them with veritable Haiku
VINCENT BASKERVILLE | VP of PRODUCT

23. Sass HAML
VINCENT BASKERVILLE | VP of PRODUCT

24. Just say no
VINCENT BASKERVILLE | VP of PRODUCT

25. why use
frameworks
VINCENT BASKERVILLE | VP of PRODUCT

26. 
✓ 
✓ 
✓ 
✓  
✓ 
VINCENT BASKERVILLE | VP of PRODUCT

27. 
- 
- 
- 
- 
- 
VINCENT BASKERVILLE | VP of PRODUCT

28. VINCENT BASKERVILLE | VP of PRODUCT

29. VINCENT BASKERVILLE | VP of PRODUCT

30. code
demo
VINCENT BASKERVILLE | VP of PRODUCT

31. resources
VINCENT BASKERVILLE | VP of PRODUCT

32. http://lesscss.org
http://incident57.com/less
http://www.initializr.com
- http://html5boilerplate.com
- http://twitter.github.com/bootstrap
VINCENT BASKERVILLE | VP OF PRODUCTION

33. oh yeah... sooo Scss *may* be
better than less now.
But Haml will forever suck.
STAY
CLASSY
VINCENT BASKERVILLE | VP of PRODUCT

34. AU REVOIR
VINCE BASKERVILLE
@WHOISVINCE
VINCE@TRIPLINGO.COM