Installing and using LESS.(PART- 1)
Here we are about to understand the installation of the LESS. This lesson also includes details about the different features of LESS. All the details are divided into # different parts.
Now, In a moment we are about to start with Part-1
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
Note the rel attribute of the link. You are required to append the /less to the end of the value 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, remember to add
There’s also a server-side version of LESS. The easiest way to install LESS on the server is with Node Package Manager (NPM).
Variable, they are best friends. If you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun adding and subtracting of hex values you want to render. Take this example
If we apply these styles to three divs, 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
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
If you want to go further links to the other two parts are
Installing and using LESS. (PART- 2)
Installing and using LESS. (PART- 3)
Other links related to LESS are here
Introduction
Difference between LESS and CSS
If you like this please share and like the blog and subscribe to the blog also.
Now, In a moment we are about to start with Part-1
Installation
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
<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 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, 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).
Variables
 | ||
| The transition from light_blue to blue to dark_blue |
Variable, they are best friends. If you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun adding and subtracting of hex values you want to render. Take this example
@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;If we apply these styles to three divs, 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.Mixins
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;
}
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
} |
| Both the article and the unordered list share the border style. |
With Sass, you declare
@mixin before the style to identify it as a mixin. Later, you declare @include to call it.
@mixin border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
@include border;
}
ul.menu {
background: #ccc;
@include border;
}
If you want to go further links to the other two parts are
Installing and using LESS. (PART- 2)
Installing and using LESS. (PART- 3)
Other links related to LESS are here
Introduction
Difference between LESS and CSS
If you like this please share and like the blog and subscribe to the blog also.
Comments
Post a Comment