How to use Basic Features in Less

Blog Blog Website Design How to use Basic Features in Less

How to use Basic Features in Less

Variables are fundamental in any language, and we discussed completely about variables in variables importance in less chapter. You may go and grasp the ideas if you been not there earlier.

Nesting is the most important feature of less once it comes to grouping of code. As we already discussed Nesting and it’s use in less too. You may have a look if you want too.

Commenting in Less
Commenting is necessary part of programming, as commenting makes easy that what particular code snippet is doing. In less we can use comments for both, CSS and LESS. So, have a look below for CSS comment.

/* Main navigation styles */
#main-menu {
 width: 100%;
 background: orange;

Once you compile above code and look at the CSS file generated, you’ll see that our comment is preserved. So, it makes easy to comment, while we are not directly working in our CSS file still we are able to comment our code snippets.

Now we have a look that how to comment in LESS file? Look at the given code below:

//main navigation styles
/* Main navigation styles */
#main-menu {
 width: 100%;
 background: orange;

In above code snippet I used comments for both CSS and LESS. While the first based is for less file only. It’ll not be there in CSS file. As if you have to made some changes in your code at some later time, you may comment that part in less file which is huge advantage. While the second comment is for CSS file. Once you compile the less code you will be able to see your comment in CSS file.

String interpolation
String interpolation is another useful less feature, it comes very handy when we have to concatenate two strings to make another string for some content to be used with. For example if we look at my name it is “Brian Hooper”, now we store first name in a variable and second name will be concatenated to it. It’s very interesting feature so let’s see in actual.

//first name in variable var1
@var1: "Brian";
//And now we use that variable and add second name as a string to it like done below:
.some-class {
  content: "@{var1}Hooper";

Just compile the above code and see your css file, you’ll see that full name is shown there. String interpolation becomes very useful when we need to concatenate strings to use again and again. Simply we can put our more usable string in a variable and so that variable can be added before any other string we want to concatenate.

Import in Less
We can also import files in less, for example if we have to import a CSS file we will write code like shown below:

@import "some-file.css";

Simply we provide path to that CSS file preceded with @import as we usually do. Importing a less file is in same fashion as css file.

//first way
@import "some-file.less";
//second way
@import "some-file";

While importing less file you either provide .less at the end of file name or not it does not matter while it does matter when its CSS file.

Less is full of features. The prior sample scripts are some of the basic features, but fundamentals to know before moving forward.

Previous Post
Prerequisites of Learning Less
Next Post
How to use Mixins in Less

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.