Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Destaque
Destaque (20)
Semelhante a LESS CSS
Semelhante a LESS CSS (20)
Mais de Man Math
Último
Último (20)
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!