The slides will help you understand LessCSS and its techniques.

1. by
Xhtmlchop
(Design to HTML/CSS)
by Xhtmlchop.com

2. The dynamic stylesheet
language.
.
Developed by Alexis Sellier
Also Known as cloudhead.io
by Xhtmlchop.com

3. What is {less} ?
by Xhtmlchop.com

4. {less} extends CSS with dynamic
behavior of its syntax like
variables, mixins, operations and
functions
by Xhtmlchop.com

5. {less} runs on both the server-side
(with Node.js and Rhino) or clientside (modern browsers only).
by Xhtmlchop.com

6. {less} is open-source, with the
recent version : 1.4.0
by Xhtmlchop.com

7. {less} is influenced by SASS
(Syntactically Awesome Stylesheets) and
has influenced the newer "SCSS" syntax
of SASS, which adapted its CSS-like block
formatting syntax.
by Xhtmlchop.com

8. by Xhtmlchop.com

9. Why to use {less}?
by Xhtmlchop.com

10. {less} provides the following
mechanisms:
variables
nesting
mixins
operators and
functions;
by Xhtmlchop.com

11. the main difference between {less}
and other CSS precompilers being
that {less} allows real-time
compilation via LESS.js by the
browser.
by Xhtmlchop.com

12. {less} allows the dynamic
editability options for dynamic
stylesheet, with the help of variable
and mixins etc.
by Xhtmlchop.com

13. {less} Syntax
by Xhtmlchop.com

14. Variables
Mixins
Nested Rules
by Xhtmlchop.com

15. Variables
by Xhtmlchop.com

16. Variables allow you to specify
widely used values in a single place,
and then re-use them throughout
the stylesheet, making global
changes as easy as changing one
line of code.
by Xhtmlchop.com

17. Write as {less}:
@white: #ffffff;
@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
/* usage variables */
#header { color: @light-blue; }
H2 { color: @nice-blue; }
Variables
Compile as CSS:
#header { color: #5f8faf; }
H2 { color: #5B83AD; }
by Xhtmlchop.com

18. Mixins
by Xhtmlchop.com

19. Mixins allow embedding all the
properties of a class into another
class by including the class name as
one of its properties, thus behaving
as a sort of constant or variable.
by Xhtmlchop.com

20. They can also behave like functions,
and take arguments. CSS does not
support Mixins.
by Xhtmlchop.com

21. Any repeated code must be
repeated in each location. Mixins
allow for more efficient and clean
code repetitions, as well as easier
alteration of code.
by Xhtmlchop.com

22. Write as {less} :
.rounded-corner(@radius:5px){
border-radius: @radius;
-webkit-border-radius:@radius;
-moz-border-radius: @radius;
}
/* usage variables */
#header { .rounded-corner; }
#footer { .rounded-corner(10px); }
Mixins
Compile as CSS:
#header { border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
by Xhtmlchop.com

23. Nested Rules
by Xhtmlchop.com

24. Rather than constructing long
selector names to specify
inheritance, in Less you can simply
nest selectors inside other selectors.
by Xhtmlchop.com

25. CSS supports logical nesting, but the
code blocks themselves are not
nested. {less} allows nesting of
selectors inside other selectors. This
makes inheritance clear and
stylesheets shorter.
by Xhtmlchop.com

26. Write as {less} :
Nested
Rules
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p{
font-size: 12px;
a{
text-decoration: none;
&:hover {
border-width: 1px;
}
}
}
}
by Xhtmlchop.com

27. Compile as CSS:
Nested
Rules
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
by Xhtmlchop.com

28. Very Basic and Usefull
Feature of {less}
by Xhtmlchop.com

29. Functions &
Operators
by Xhtmlchop.com

30. {less} allows operations and
functions. If some elements in your
stylesheet are proportional and
similar to other elements, then this
syntax helps to make them
dynamic.
by Xhtmlchop.com

31. Operations allow addition,
subtraction, division and
multiplication of property values
and colors, which can be used to
create complex relationships
between properties.
Operations should only be
performed within parentheses {} in
order to ensure compatibility with
CSS.
by Xhtmlchop.com

32. Functions map one-to-one with
JavaScript code, allowing you to
manipulate values however you
want.
by Xhtmlchop.com

33. Write as {less} :
@the-border: 1px;
@base-color: #111;
@red:
#842210;
Functions
&
Operators
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
by Xhtmlchop.com

34. Functions References
Writing a funciton require basic javascript
knowledge to pass the valid arguments and
strings.
For more details do visit:
http://lesscss.org/#reference
by Xhtmlchop.com

35. Functions References
Do visit:
http://lesscss.org/#reference
by Xhtmlchop.com

36. {less} Usage
by Xhtmlchop.com

37. Link your .less stylesheets with the rel set
to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
by Xhtmlchop.com

38. Then download less.js from the top of the page,
and include it in the <head> element of your
page, like so:
<script src="less.js" type="text/javascript"></script>
by Xhtmlchop.com

39. Preferred file/folder structure for ease:
frontend/less/style.less
frontend/less/includes/variables.less
frontend/less/includes/mixins.less
by Xhtmlchop.com

40. Make sure you include your
stylesheets before the script.
by Xhtmlchop.com

41. Sources:
https://github.com/less/less.js
by Xhtmlchop.com

42. Already Coded Project
http://74.208.70.104/43145/1a30hr6ye43145/
by Xhtmlchop.com

43. User’s Review
by Xhtmlchop.com

44. “I'm fairly new to {less} as well, but this is
the easiest, most straightforward way I've
seen to make it work and get out of your
way.”
“About half use one of the preprocessor
options available to them. Of the
languages used, {less} is the most
popular. ”
“ it doesn't have compatibility issue. that
has been taken care of, as for as {less}
css is concerned. I must say its preferable
to use. ”
by Xhtmlchop.com

45. Cons of {less} CSS
by Xhtmlchop.com

46. - File Size is Deceiving/uncertain
- More Process
- Hard to Go Back
- Variety of Syntax
- Team Coordination
Source: http://jaketrent.com/post/cons-css-preprocessors/
by Xhtmlchop.com

47. Editor or Applications
for {less}
by Xhtmlchop.com

48. Respectively all major editors can be
used for writing {less}
- Adobe DreamWeaver
- Notepad++
- Sublime Text 2
- Crunch! - The tastiest LESS editor (mac)
- Kineticwing IDE
- Coda
- Geany
NOTE: DreamWeaver require Less syntax highlighter extension to enable .less file
syntax highligh & code hint
source:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522
by Xhtmlchop.com

49. Usefull Stuffs &
References
by Xhtmlchop.com

50. http://lesscss.org/
http://en.wikipedia.org/wiki/LESS_(stylesheet_language)
http://cognition.happycog.com/article/more-or-less
10 {less} CSS Examples You Should Steal for Your Projects
http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-
by Xhtmlchop.com

51. {less} vs Sass
Comparison
https://gist.github.com/wilmoore/820035
by Xhtmlchop.com

52. Using the {less} CSS
Preprocessor for
Smarter StyleSheets
By Dmitry Fadeyev
http://coding.smashingmagazine.com/2010/12/06/using-the-less-csspreprocessor-for-smarter-style-sheets/
by Xhtmlchop.com

53. Top Benefits or {less}
by Xhtmlchop.com

54. 1. User Friendly & Smarter StyleSheet
2. Cleaner and Clear Structure With
Nesting
3. Variables For Faster Maintenance
4. Reusing Similar Classes and Styles
5. Operations & Functions
6. Namespaces and Accessors
Source: http://coding.smashingmagazine.com/2010/12/06/using-the-less-csspreprocessor-for-smarter-style-sheets/
by Xhtmlchop.com

55. Conclusion
by Xhtmlchop.com

56. To sum up, {less} can now be
implemented with only two lines of code
in your HTML and can dramatically change
the way you write CSS. Spend a few days
with {less} and you’ll be creating and
tweaking complex stylesheets faster than
ever before.
You can use {less} to create variables,
perform operations on variables, nest
rules, and build complicated mixins to
simplify your CSS3.
by Xhtmlchop.com

57. Other than this, there is no limitations
with special Browser Compatibilities, all
supportive as per the other CSS terms
which we are following till date.
by Xhtmlchop.com

58. Thank You
from
XhtmlChop.com
(Design to HTML)