LUCiD GRAFiX Logo

Tutorial
YouTube RSS Feed
Search

TUTORIAL

LESS Preprocessor Fundamentals

Written by Posted on November 17th, 2013 2 Comments
Share This

Here is LESS Preprocessor fundamentals, a new series on how to use the LESS preprocessor. I put this series together to help people start using LESS, these videos are fundamentals and hopefully will be enough to get you started.

  • Setup
  • Variables
  • Nesting
  • Mixins
  • Advanced Mixins
  • Colors
  • Guarded Mixins
  • @import

This is my intro to LESS.

1. Setup

Here are a couple of LESS compilers 

WinLess @ http://winless.org/
SimpLESS @ http://wearekiss.com/simpless
Prepros @ http://alphapixels.com/prepros/

2. Variables

Variables can be strings, properties or colors.

 3. Nesting

This video goes into how to do nesting in LESS and how it helps with CSS specificity and organization of your code as well.

4. Mixins

Imagine you could change the CSS for all elements that had a certain look or feel… Well there is and they are mixins, it is important that the logic is seen so that you get the most benefit.

5. Advanced Mixins

This gets into how to get more out of your mixin.

6. Color

This goes over some really cool things you can do with color, such as lighten, darken, fade and spin.

 7. Guarded Mixins

This video goes into how to make conditional mixins.

Here are some of the functions:

you can also use color functions like:

8. @import

This video goes into how to make cheat sheets and add custom mixins to your sheet. Here are a couple of sites with great cheat sheets for you to download.

 http://mateuszkocz.github.io/3l/ Lots of Love for LESS
http://lesselements.com/ LESS Elements

You should also check out http://getbootstrap.com/2.3.2/ which was also made with LESS. You can find out more about LESS by going and checking them out here http://lesscss.org/

This wraps up my video series on LESS and I hope you enjoyed.

and always…

Happy Coding!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

SASS 6 Intro videos - SIMPLIFIED SASS SIMPLIFIED – 5 Video Series
CSS Font shorthand explained CSS Font Shorthand Explained
Pure CSS Sliding Modal Pure CSS Sliding Modal
Leave a comment

2 Responses

  1. Hi Eric,
    Thank you for creating this tutorial. I am trying to follow along but I get lost almost right away. I have Prepros but where can I find the folders (lesstuts) that you are using to compile the less to css?

  2. Eric Young says:

    Marc,

    You can drag any folder and make it your project folder, In the video I used less tuts as my project folder which was the folder that I used to make these tutorials. Let me know if you have any more questions.

Leave a Reply