Wednesday, 7 September 2016

Installing and using LESS.(PART- 1)

Here we are about to understand the installation of the LESS. This lesson also includes the details about the different features of LESS. These all the details are divided into # different parts.

Now, In a moment we are about to start with Part-1


Including LESS in something that you’re building is about as easy as it gets:
Go get yourself a copy of less.js;
Create a file to put your styles in, such as style.less;
Add the following code to your HTML’s <head>;

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Note the rel attribute of the link. You are required to append the /less to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you’re using HTML5 syntax, and remember to add type="text/ and the type="text/javascript".

There’s also a server-side version of LESS. The easiest way to install LESS on the server is with Node Package Manager (NPM).


A screenshot illustrating the transition from 3 shades of blue

Transition from light_blue to blue to dark_blue

Variable, they are best friends.In the event that you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee yourself consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun little adding and subtracting of hex values that you want to render. Take this example

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

If we apply these styles to three div's, we can see the gradated effect created by adding and subtracting the hex values to and from the original blue:

The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.


On occasion, we might create a style that’s intended to be used repeatedly throughout the style sheet. Nothing is stopping you from applying multiple classes to the elements in the HTML, but you could also do this without ever leaving your style sheet, using LESS. To illustrate this, I have pasted some sample code that one might use to style two elements on the page.

.border {
border-top: 1px dotted #333;
} {
background: #eee;
} {
background: #ccc;

A screenshot illustrating two elements that share a border style
Both the article and the unordered list share the border style.
This will give you something similar to what you would get if you had gone back to the HTML file and added the .bordered class to the two elements there — except you’ve done it without leaving the style sheet. And it works just as well:

With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.

@mixin border {
border-top: 1px dotted #333;
} {
background: #eee;
@include border;
} {
background: #ccc;
@include border;

If you want to go further links of the other two parts are
Installing and using LESS.(PART- 2)
Installing and using LESS.(PART- 3)

Other links related to LESS are here
Difference between LESS and CSS

If you like this video please share and like the blog  and subscribe to the blog also.