Skip to content
← Back to Community
Less
Profile icon
ChandlerMorell

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.

Voters
Profile icon
SergeyKartoshka
Profile icon
Aakansha1
Profile icon
iwebb70
Profile icon
Nathan2413
Profile icon
timmy_i_chen
Profile icon
Mosrod
Profile icon
nsedler
Profile icon
ChandlerMorell
Comments
hotnewtop
Profile icon
makerrough

A couple of years ago I also wanted to create my own discord bot for my channel with my gaming friends. I figured out how to make the bot was able to send video, but there was no autoconverter, and my bot could only send mp4 files and so I spent a couple of evenings and through third-party services came up with the bot itself to determine the format and using one of the best Spider Solitaire converters automatically convert all video and sent already mp4.

Profile icon
timmy_i_chen

@ChandlerMorell did you mean for this to go in the challenges board? I can move it if you'd like :)

Profile icon
ChandlerMorell

@timmy_i_chen YES! Thank you so much for noticing!

Profile icon
timmy_i_chen
Profile icon
ChandlerMorell

@timmy_i_chen Thank you!! Did you like the tutorial??

Profile icon
timmy_i_chen

@ChandlerMorell I did! I didn't know it was so easy to use less on repl.it :)

Profile icon
ChandlerMorell

@timmy_i_chen Great! Me either until I got a strong curiosity. I honestly didn't even know about Less until a few days ago. Haha. I'm running out of ideas for things to make though. And what language. Also, is it possible to make a website with HTML/PHP on Repl.it?