Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

LESS CSS

205 vues

Publié le

Basic introduction to LESS CSS and how to start up.

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

LESS CSS

  1. 1. LESS CSS By Man Math Support Developer 097 847 0 847 man@web-essentials.asia
  2. 2. Agenda • What is LESS ? • LESS features • LESS Advantages • How to use LESS ? • References • Demo 225-May-2013
  3. 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
  4. 4. LESS Features
  5. 5. • Less variable defined with at sign (@) Less CSS 25-May-2013 5 Variable
  6. 6. Operations • Less allows addition, subtraction, division and multiplication of property values and colors Less CSS 25-May-2013 6
  7. 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
  8. 8. Color Functions
  9. 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
  10. 10. Less CSS 25-May-2013 10
  11. 11. Nested Less CSS 25-May-2013 11
  12. 12. Guard Expression (if statement) Less 25-May-2013 12
  13. 13. Guard Expression (if statement) CSS 25-May-2013 13
  14. 14. Variable scope • The scope is inside the curly bracket ({ }), otherwise you have to declare as global 25-May-2013 14 Error
  15. 15. LESS Advantages • Increase readability and organization of CSS using: Imports Nested rules Comments /* comment here */ // quick comment 25-May-2013 15
  16. 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. 17. LESS is more while CSS is always sucks
  18. 18. How to use LESS ?
  19. 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. 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. 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. 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. 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. 24. Demo
  25. 25. Thanks You!

×