4
Less
ChandlerMorell (70)

Less

Less stands for Leaner CSS, and for good reason. If you know anything about CSS, this will make your life easier. First, we have to create a stylesheet. I am naming mine style.less.

Next, we have to link the stylesheet to our webpage. Here is how we do that:

<link rel="stylesheet/less" type="text/css" href="style.less"/>

Now that we have linked our stylesheet, we have to include some JS. Don't worry! This script is already made for us, and is readily available. All we have to do is paste the following in the <body>.

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>

If you happened to rename your stylesheet, just do this:

<link rel="stylesheet/less" type="text/css" href="your-stylesheet.less"/>

Now we are ready to start using Less!

Open your stylesheet. Let's start by making our body's background a dark grey. Type the following:

@bgcolor: #333;

body {
      background-color: @bgcolor;
}

You may be wondering

Hold on now, what's up with that there @ symbol up there?

I would tell you that is a variable! Yes, a variable in CSS. Change once change everywhere. Since we have variables, could we possibly have... functions???

I would say...

Heck yes, brother.

Anyway...

Back to the point. That variable up there is a placeholder for #333. Or any color for that matter. Change it once up there, and it changes it everywhere in the document.

You should now have a fairly basic concept of variables now. They don't get much harder than that.

Oh yeah, comments are made like this:

// Single line
/* Multiline */

Say we have a <div>. In this <div>, we want to store links for a navigation bar. Watch this:

.navigation-bar {
      max-width: 1100px;
      background-color: #555;

      a {
            color: white;
      }
}

Notice

I put the style for the links INSIDE of the style for the .navigation-bar! Isn't that awesome?! It will only change the style of the links inside of that nav bar.

Say I wanted all links on the page to be white, and not underlined. But on one particular instance, I wanted to add another style. Wouldn't it be awesome if there was an easy way to do that? Think no more because I have it right here:

.link {
      color: white;
      text-decoration: none;
}

.nav-bar {
      .link; // Imports all style from the .link
      font-size: 20px; // Adds font size that was not in .link that we needed
}

With this wealth of knowledge I have granted you, this should come easily. It should be pretty self explanatory. Now... functions.

.link-setup (@color, @size) {
      color: @color;
      font-size: @size;
      text-decoration: none;
}

a {
      .link (blue, 15px);
}

We made a function to set up links. We pass through a color for the link, and a size for the links.

That's all the time I have. Any questions? Ask me in the comments. Clarification? Ask for it. Bored and wanna talk? Do it.

Goodbye.

You are viewing a single comment. View All