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

780 views

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 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)

×