LESS CSS
•
0 likes•386 views
This document introduces LESS, a dynamic stylesheet language that extends CSS by adding features such as variables, nested rules, mixins, functions, and operations. LESS compiles to regular CSS, allowing it to be widely supported. Key features covered include variables, nesting, mixins, functions, and guard expressions to add logic. Advantages of LESS are listed as increased organization, readability, and decreased code through its features. The document also provides information on using LESS both client-side and server-side, as well as references for further reading.
Report
Share
LESS CSS
- 1. LESS CSS By Man Math Support Developer 097 847 0 847 man@web-essentials.asia
- 2. Agenda • What is LESS ? • LESS features • LESS Advantages • How to use LESS ? • References • Demo 225-May-2013
- 3. What is LESS ? • Dynamic Style sheet language designed by Alexis Sellier • The CSS pre-processors • Leaner/Meaner CSS • Valid CSS is valid LESS 25-May-2013 3
- 5. • Less variable defined with at sign (@) Less CSS 25-May-2013 5 Variable
- 6. Operations • Less allows addition, subtraction, division and multiplication of property values and colors Less CSS 25-May-2013 6
- 7. Function (build-in) • Functions map one-to-one with JavaScript code, allowing manipulation of values. It could be Math functions, color function, … Less CSS 25-May-2013 7
- 9. Mixins • 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. They can also behave like functions, and take arguments. 25-May-2013 9
- 14. Variable scope • The scope is inside the curly bracket ({ }), otherwise you have to declare as global 25-May-2013 14 Error
- 15. LESS Advantages • Increase readability and organization of CSS using: Imports Nested rules Comments /* comment here */ // quick comment 25-May-2013 15
- 16. LESS Advantages • Decrease how much CSS you have to write using: Variable Function and Operations Mixins Expression statement Namespace 25-May-2013 16
- 17. LESS is more while CSS is always sucks
- 18. How to use LESS ?
- 19. Client side • Include your less file (*.less) in <head> tag • Download less.js from http://lesscss.org • Include less.js after your less file <head> Make sure you include style sheets before the script 25-May-2013 19
- 20. Server side • Installation (Unix/Linux OS) $ npm install –g less • Command line Compile less as plain CSS $ lessc style.less > style.css This command will output the simple plain CSS 25-May-2013 20
- 21. Server side • You might want minified CSS output Simple minified CSS $ lessc –x style.less > style.css Most minified CSS $ lessc –yui-compress style.less > style.css For more command option you can run $ lessc or $ lessc --help 25-May-2013 21
- 22. Less compiler on Windows or Mac • Cygwin (http://cygwin.com) • SimpLESS (http://wearekiss.com/simpless) • Koala (http://koala-app.com) • WinLESS (http://winless.org) • … 25-May-2013 22
- 23. References • http://lesscss.org • http://css-tricks.com/sass-vs-less • http://dotlesscss.org • http://leafo.net/lessphp • https://github.com/cloudhead/less • http://en.wikipedia.org/wiki/LESS_(styles heet_language) 25-May-2013 23
- 24. Demo
- 25. Thanks You!