###### tags: `CSS` `LESS`
# LESS
What is Less?
It is part of the Pre-processor world. It is still CSS but it extends CSS with more dynamic behavior. By using Pre-processors like LESS you can make more complex and reusable functions with in our styling.

Make sure you install on VS Code the Extention Easy LESS

## What makes it better?
Well there are 3 main aspects that make it better to use than just plain ol CSS
1. Nesting
2. Variables
3. Mixins

Don't worry I will cover the good stuff and give you some links for even more.

### Nesting
You know how with HTML everything is nested?

<header>
    <nav>
        <a href='#'>Link</a>
    </nav>
</header>

So the anchor tag is a child of the nav and the nav is a child of the header and so on and so for right? With LESS you get to write your CSS the same way

header {
    background-color: red;
    
    nav {
        background-color: blue;
        
        a {
            color: white;
        }
    }
}

So here our header is red our nav will be blue and our anchor tag with have white font. All nested together easy to read and find.

### Variables
Now we are getting to some of the cool stuff. So I have a set of colors that I want to use through out my site...all in hex. At the beginning of my LESS I can declair these fancy things called variables (and I can call them what ever) and then later on just call the name I gave it and be done.
Take our above HTML still and lets change the styling

@bg: #ff0000;
@altbg: #0000ff;
@font: #fff;

header {
    background-color: @bg;
    
    nav {
        background-color: @altbg;
        
        a {
            color: @font;
        }
    }
}

Sure it looks like more code now....but just imagin a whole website....trying to remember what color was for what. Give them handy names and off you go. Or how about this guy.

@bg: #ff0000;
@altbg: #0000ff;
@font: #fff;
@border: 3px groove @font;

header {
    background-color: @bg;
    border: @border;
    
    nav {
        background-color: @altbg;
        
        a {
            color: @font;
        }
    }
}

So now I just gave our header a border that is 3px wide, is the groove style and is the same color as my anchor tags....white.

### Mixins
If you thought variables were fun....this will be even better. Using again the same html code and our current styling lets add some flex properties for example 1st without mixins then with
No Mixins:

@bg: #ff0000;
@altbg: #0000ff;
@font: #fff;
@border: 3px groove @font;

header {
    background-color: @bg;
    border: @border;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    nav {
        background-color: @altbg;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        a {
            color: @font;
        }
    }
}

Ok Now with Mixins:

@bg: #ff0000;
@altbg: #0000ff;
@font: #fff;
@border: 3px groove @font;

.flexcolumn {
    display: flex;
    flex-direction: column;
    justity-content: center;
    align-items: center;
}
.links {
    text-decoration: none;
    color: @font;
}

header {
    background-color: @bg;
    border: @border;
    .flexcolumn();
    
    nav {
        background-color: @altbg;
        .flexcolumn();
        
        a {
            .links();
        }
    }
}

So now with 1 line in the main styling of the header I have added 4 styling properties. Same with the nav and I even adjusted the anchor too.

## How do we actually use this?
So glad you asked. 1st your going to need an extention in VS Code like Easy less. You will still link you stylesheet the same way using the .css file. But you write your styling in .less. Every time you save that .less file (with that extention) it will automatically update your .css file for you.

In all honesty that is all the basics. Is there more? Yup, but that is what the following links are for.
- [Intro to CSS Pre-Processors](https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus)
- [How to use LESS](https://www.smashingmagazine.com/2010/12/using-the-less-css-preprocessor-for-smarter-style-sheets/)
- [Why Use LESS](https://techaffinity.com/blog/what-is-less-css-preprocessor/)