4332 Grimes Ave N.
Minneapolis, MN 55422
(612) 987-8808

Blog

LESS in 4 Steps. (A designer’s guide)

Whether you’ve used CSS for years or just got a handle on CSS, you’re probably hearing talk about LESS, SASS, CSS pre-processors, mix-ins and wondering where and how to get started. If you’re like me, you learn by seeing it demonstrated versus reading a technical explanation of how it works.

Because of this, we’re going to skip all of the technical mumbo jumbo and dive in to creating CSS from LESS files. My belief is once you learn this critical piece, you will be able to learn all of the technical stuff as you go along. So let’s get to it!

  1. Download & install Koala.
    This is easy to use app creates CSS from your LESS files.
  2. Download example files and unzip them.
  3. Step 3. Launch Koala.
    easy-less-screen1
    You can either Drag & Drop the unzipped example files you downloaded onto the app which will add all of the files to the app or you can click the plus button in the upper left corner, browse to the downloaded files, select the less folder and CLICK UPLOAD(mac) or Ok(windows).
    easy-less-screen2
    You should now have 3 files listed in Koala: base.less, colors.less and style.less. If you’re on Windows you’ll see the path to the file and it will not show you the name of the actual file because the file path is soo long. Just know they are in the order listed above.
    easy-less-screen3
  4. CLICK on the last file listed. It will be style.less. When you click the file, a panel will slide out from the right.
    easy-less-screen
    Click COMPILE. You will see a SUCCESS message. You will also notice you now have a folder called css with a file in it called style.css. That’s it!

Final Thoughts. This is a whirlwind example to get you started. Take some time to explore with the above .less files. I placed comments in each one so you get a better sense of how.less works. If you enjoyed this post, please drop me a line.

Posted in CSS, LESS, Web Design, Web Development. Bookmark post.