by

Xhtmlchop

(Design to HTML/CSS)

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

by Xhtmlchop.com
What is {less} ?

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

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

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

by Xhtmlchop.com
{less} is influenced by SASS
(Syntactically Awesome Stylesheets) and
has influenced the newer "SCSS" syntax
of SASS, which...
by Xhtmlchop.com
Why to use {less}?

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

by Xhtmlchop.com
the main difference between {less}
and other CSS precompilers being
that {less} allows real-time
compilation via LESS.js b...
{less} allows the dynamic
editability options for dynamic
stylesheet, with the help of variable
and mixins etc.

by Xhtmlc...
{less} Syntax

by Xhtmlchop.com
Variables
Mixins
Nested Rules

by Xhtmlchop.com
Variables

by Xhtmlchop.com
Variables allow you to specify
widely used values in a single place,
and then re-use them throughout
the stylesheet, makin...
Write as {less}:
@white: #ffffff;
@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
/* usage variables */
#header { c...
Mixins

by Xhtmlchop.com
Mixins allow embedding all the
properties of a class into another
class by including the class name as
one of its properti...
They can also behave like functions,
and take arguments. CSS does not
support Mixins.

by Xhtmlchop.com
Any repeated code must be
repeated in each location. Mixins
allow for more efficient and clean
code repetitions, as well a...
Write as {less} :
.rounded-corner(@radius:5px){
border-radius: @radius;
-webkit-border-radius:@radius;
-moz-border-radius:...
Nested Rules

by Xhtmlchop.com
Rather than constructing long
selector names to specify
inheritance, in Less you can simply
nest selectors inside other se...
CSS supports logical nesting, but the
code blocks themselves are not
nested. {less} allows nesting of
selectors inside oth...
Write as {less} :

Nested
Rules

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p{
font-size: 12px;
a{
text-decorati...
Compile as CSS:

Nested
Rules

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p...
Very Basic and Usefull
Feature of {less}

by Xhtmlchop.com
Functions &
Operators

by Xhtmlchop.com
{less} allows operations and
functions. If some elements in your
stylesheet are proportional and
similar to other elements...
Operations allow addition,
subtraction, division and
multiplication of property values
and colors, which can be used to
cr...
Functions map one-to-one with
JavaScript code, allowing you to
manipulate values however you
want.

by Xhtmlchop.com
Write as {less} :
@the-border: 1px;
@base-color: #111;
@red:
#842210;

Functions
&
Operators

#header {
color: (@base-colo...
Functions References
Writing a funciton require basic javascript
knowledge to pass the valid arguments and
strings.
For mo...
Functions References
Do visit:
http://lesscss.org/#reference

by Xhtmlchop.com
{less} Usage

by Xhtmlchop.com
Link your .less stylesheets with the rel set
to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="style...
Then download less.js from the top of the page,
and include it in the <head> element of your
page, like so:
<script src="l...
Preferred file/folder structure for ease:
frontend/less/style.less
frontend/less/includes/variables.less
frontend/less/inc...
Make sure you include your
stylesheets before the script.

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

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

by Xhtmlchop.com
User’s Review

by Xhtmlchop.com
“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...
Cons of {less} CSS

by Xhtmlchop.com
- File Size is Deceiving/uncertain
- More Process
- Hard to Go Back
- Variety of Syntax
- Team Coordination
Source: http:/...
Editor or Applications
for {less}

by Xhtmlchop.com
Respectively all major editors can be
used for writing {less}
- Adobe DreamWeaver
- Notepad++
- Sublime Text 2
- Crunch! -...
Usefull Stuffs &
References

by Xhtmlchop.com
http://lesscss.org/
http://en.wikipedia.org/wiki/LESS_(stylesheet_language)
http://cognition.happycog.com/article/more-or-...
{less} vs Sass
Comparison
https://gist.github.com/wilmoore/820035

by Xhtmlchop.com
Using the {less} CSS
Preprocessor for
Smarter StyleSheets
By Dmitry Fadeyev

http://coding.smashingmagazine.com/2010/12/06...
Top Benefits or {less}

by Xhtmlchop.com
1. User Friendly & Smarter StyleSheet
2. Cleaner and Clear Structure With
Nesting
3. Variables For Faster Maintenance
4. R...
Conclusion

by Xhtmlchop.com
To sum up, {less} can now be
implemented with only two lines of code
in your HTML and can dramatically change
the way you ...
Other than this, there is no limitations
with special Browser Compatibilities, all
supportive as per the other CSS terms
w...
Thank You
from

XhtmlChop.com
(Design to HTML)
Upcoming SlideShare
Loading in...5
×

What is LessCSS and its Detailed Explation - Xhtmlchop

545
-1

Published on

The slides will help you understand LessCSS and its techniques.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
545
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
54
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

What is LessCSS and its Detailed Explation - Xhtmlchop

  1. 1. by Xhtmlchop (Design to HTML/CSS) by Xhtmlchop.com
  2. 2. The dynamic stylesheet  language. . Developed by Alexis Sellier Also Known as cloudhead.io by Xhtmlchop.com
  3. 3. What is {less} ? by Xhtmlchop.com
  4. 4. {less} extends CSS with dynamic behavior of its syntax like variables, mixins, operations and functions by Xhtmlchop.com
  5. 5. {less} runs on both the server-side (with Node.js and Rhino) or clientside (modern browsers only). by Xhtmlchop.com
  6. 6. {less} is open-source, with the recent version : 1.4.0 by Xhtmlchop.com
  7. 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. 8. by Xhtmlchop.com
  9. 9. Why to use {less}? by Xhtmlchop.com
  10. 10. {less} provides the following mechanisms: variables nesting mixins operators and functions; by Xhtmlchop.com
  11. 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. 12. {less} allows the dynamic editability options for dynamic stylesheet, with the help of variable and mixins etc. by Xhtmlchop.com
  13. 13. {less} Syntax by Xhtmlchop.com
  14. 14. Variables Mixins Nested Rules by Xhtmlchop.com
  15. 15. Variables by Xhtmlchop.com
  16. 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. 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. 18. Mixins by Xhtmlchop.com
  19. 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. 20. They can also behave like functions, and take arguments. CSS does not support Mixins. by Xhtmlchop.com
  21. 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. 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. 23. Nested Rules by Xhtmlchop.com
  24. 24. Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. by Xhtmlchop.com
  25. 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. 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. 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. 28. Very Basic and Usefull Feature of {less} by Xhtmlchop.com
  29. 29. Functions & Operators by Xhtmlchop.com
  30. 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. 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. 32. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want. by Xhtmlchop.com
  33. 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. 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. 35. Functions References Do visit: http://lesscss.org/#reference by Xhtmlchop.com
  36. 36. {less} Usage by Xhtmlchop.com
  37. 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. 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. 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. 40. Make sure you include your stylesheets before the script. by Xhtmlchop.com
  41. 41. Sources: https://github.com/less/less.js by Xhtmlchop.com
  42. 42. Already Coded Project http://74.208.70.104/43145/1a30hr6ye43145/ by Xhtmlchop.com
  43. 43. User’s Review by Xhtmlchop.com
  44. 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. 45. Cons of {less} CSS by Xhtmlchop.com
  46. 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. 47. Editor or Applications for {less} by Xhtmlchop.com
  48. 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. 49. Usefull Stuffs & References by Xhtmlchop.com
  50. 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. 51. {less} vs Sass Comparison https://gist.github.com/wilmoore/820035 by Xhtmlchop.com
  52. 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. 53. Top Benefits or {less} by Xhtmlchop.com
  54. 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. 55. Conclusion by Xhtmlchop.com
  56. 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. 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. 58. Thank You from XhtmlChop.com (Design to HTML)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×