What is LessCSS and its Detailed Explation - Xhtmlchop
•Télécharger en tant que PPS, PDF•
1 j'aime•835 vues
The slides will help you understand LessCSS and its techniques.
Recommandé
Contenu connexe
Tendances
Tendances (16)
Similaire à What is LessCSS and its Detailed Explation - Xhtmlchop
Similaire à What is LessCSS and its Detailed Explation - Xhtmlchop (20)
Dernier
Dernier (20)
What is LessCSS and its Detailed Explation - Xhtmlchop
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 42. Already Coded Project http://74.208.70.104/43145/1a30hr6ye43145/ 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
- 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)