Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What is LessCSS and its Detailed Explation - Xhtmlchop


Published on

The slides will help you understand LessCSS and its techniques.

Published in: Technology
  • Be the first to comment

What is LessCSS and its Detailed Explation - Xhtmlchop

  1. 1. by Xhtmlchop (Design to HTML/CSS) by
  2. 2. The dynamic stylesheet  language. . Developed by Alexis Sellier Also Known as by
  3. 3. What is {less} ? by
  4. 4. {less} extends CSS with dynamic behavior of its syntax like variables, mixins, operations and functions by
  5. 5. {less} runs on both the server-side (with Node.js and Rhino) or clientside (modern browsers only). by
  6. 6. {less} is open-source, with the recent version : 1.4.0 by
  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
  8. 8. by
  9. 9. Why to use {less}? by
  10. 10. {less} provides the following mechanisms: variables nesting mixins operators and functions; by
  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
  12. 12. {less} allows the dynamic editability options for dynamic stylesheet, with the help of variable and mixins etc. by
  13. 13. {less} Syntax by
  14. 14. Variables Mixins Nested Rules by
  15. 15. Variables by
  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
  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
  18. 18. Mixins by
  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
  20. 20. They can also behave like functions, and take arguments. CSS does not support Mixins. by
  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
  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
  23. 23. Nested Rules by
  24. 24. Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. by
  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
  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
  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
  28. 28. Very Basic and Usefull Feature of {less} by
  29. 29. Functions & Operators by
  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
  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
  32. 32. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want. by
  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
  34. 34. Functions References Writing a funciton require basic javascript knowledge to pass the valid arguments and strings. For more details do visit: by
  35. 35. Functions References Do visit: by
  36. 36. {less} Usage by
  37. 37. Link your .less stylesheets with the rel set to “stylesheet/less”: <link rel="stylesheet/less" type="text/css" href="styles.less" /> by
  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
  39. 39. Preferred file/folder structure for ease: frontend/less/style.less frontend/less/includes/variables.less frontend/less/includes/mixins.less by
  40. 40. Make sure you include your stylesheets before the script. by
  41. 41. Sources: by
  42. 42. Already Coded Project by
  43. 43. User’s Review by
  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
  45. 45. Cons of {less} CSS by
  46. 46. - File Size is Deceiving/uncertain - More Process - Hard to Go Back - Variety of Syntax - Team Coordination Source: by
  47. 47. Editor or Applications for {less} by
  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: by
  49. 49. Usefull Stuffs & References by
  50. 50. 10 {less} CSS Examples You Should Steal for Your Projects by
  51. 51. {less} vs Sass Comparison by
  52. 52. Using the {less} CSS Preprocessor for Smarter StyleSheets By Dmitry Fadeyev by
  53. 53. Top Benefits or {less} by
  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: by
  55. 55. Conclusion by
  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
  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
  58. 58. Thank You from (Design to HTML)