Write better CSS with {LESS}

Sandy Ludosky

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (1h 40m)
    • 1. Welcome!

      1:08
    • 2. Introduction

      0:39
    • 3. Variables

      8:10
    • 4. Nesting

      10:13
    • 5. Mixins

      10:52
    • 6. Operators

      6:03
    • 7. Introduction

      0:47
    • 8. Parametized mixins

      13:01
    • 9. Guarded mixins

      6:10
    • 10. Built in Functions

      2:36
    • 11. @import

      7:22
    • 12. ProjectOverview

      2:10
    • 13. Grid

      10:14
    • 14. Header

      5:47
    • 15. Main

      8:47
    • 16. Footer

      2:16
    • 17. More

      3:50

About This Class

What is LESS ?

Less is a CSS is a superset of CSS and a pre-processor programming language, often referred as "Dynamic CSS".

  • LESS syntax is modelled after traditional CSS
  • LESS compiles into standard CSS3
  • LESS allows you to extend your CSS with great features such as :
    • Variables for faster maintenance
    • Mixins as re-usable objects
    • Nesting for a cleaner stylesheet structure
    • Math calculations with the Operators.
  • Less code and more work done !

Why use LESS ?

While CSS is a great language, it has its limitations.

For example, if you have a color code used multiple times in your stylesheet, you need to edit this one multiple times to update your design. Very tedious process!

LESS is great for the following reasons. :

  • Allows to cut down one code and save time
  • Reduce repetition (DRY) and mistakes
  • It makes logical sense to break out CSS into multiple files with the feature

Every web developer or front-end UI engineer should use LESS over traditional CSS