LESS

A lecture about LESS which is a CSS pre-processor that makes the css more maintainable & themable with build in functions and more..

Created and presented by Yosi Konigsberg

Transcript

1. Yosi Konigsberg February 2016
2. Agenda • Functions • Definition • Variables • Nested Rules • Mixins
3. Definition Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
4. Agenda • Definition • Variables • Nested Rules • Mixins • Functions
5. Variables It's not uncommon to see the same value repeated dozens if not hundreds of times across your stylesheets.
6. Variables - basic example Variables make your code easier to maintain by giving you a way to control those values from a single location.
7. Variables - Urls & Media Queries
8. Variables - Selectors As Variables. Selectors variables examples:
9. Agenda • Definition • Variables • Nested Rules • Mixins • Functions
10. Nested Rules Less gives you the ability to use nesting instead of, or in combination with cascading. The resulting code is more concise, and mimics the structure of your HTML.
11. What We Had Before Nested Rules
12. Nested Rules - Mimics The HTML Structure
13. Agenda • Definition • Variables • Nested Rules • Mixins • Functions
14. Mixins Definition: Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.
15. Mixins
16. Mixins - Example Of Using Pesudo Selectors
17. Mixins - Not Outputting the Minxin If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.
18. Mixins - Parameters & Default Values We can use mixins like functions: set attributes, and set defaults.
19. Agenda • Definition • Variables • Nested Rules • Mixins • Functions
20. Functions Less provides a variety of functions which transform colors, manipulate strings use math and more They are documented fully in the function reference.
21. Color Function Examples Extend CSS abilities using color functions. Demo: http://codepen.io/YKonigsberg/pen/NxZYme
22. Agenda • Definition • Variables • Nested Rules • Mixins • Functions
23. Summary This is only an introduction and we only covered the basics . I encourage you to dive deeply and explore the LESS and improve your set of skills with this great tool.