Step1:
Create a HTML File index. html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" href="style.css" rel="stylesheet"/>
</head>
<body>
<header>
<p> i would love to work with less </p>
</header>
</body>
</html>
Step2:
Denote the style sheet name whatever u want ( example : style.css )
<link type="text/css" href="style.css" rel="stylesheet"/>
Step3:
Create a style sheet name cool.less
There are two types of class
1. less - @ difference between the both is $ and @ symbols
2. sass - $
@color:red;
@text-green:green;
div
{
color:@color;
}
header
{
height:80px;
width:1024px;
}
header p
{
color:@text-green;
}
Step4 :
Install the node.js in your computer and open the command prompt
you need to install the less module by running
npm install less -g
give the location of your folder ( my folder name is workout)
Cd users\desktop\workout > lessc cool.css > style.css
( if you see in the browser it will show only the style.css in chrome)
if u want to display the less file in browser we want to give --source- map =style.map
Cd users\desktop\workout > lessc cool.css > style.css --source- map =style.map
Step5 :
Now you can go and see the folder (workout) . style.css and style.map will be generated
Step6 :
Output
Create a HTML File index. html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" href="style.css" rel="stylesheet"/>
</head>
<body>
<header>
<p> i would love to work with less </p>
</header>
</body>
</html>
Step2:
Denote the style sheet name whatever u want ( example : style.css )
<link type="text/css" href="style.css" rel="stylesheet"/>
Step3:
Create a style sheet name cool.less
There are two types of class
1. less - @ difference between the both is $ and @ symbols
2. sass - $
@color:red;
@text-green:green;
div
{
color:@color;
}
header
{
height:80px;
width:1024px;
}
header p
{
color:@text-green;
}
Step4 :
Install the node.js in your computer and open the command prompt
you need to install the less module by running
npm install less -g
give the location of your folder ( my folder name is workout)
Cd users\desktop\workout > lessc cool.css > style.css
( if you see in the browser it will show only the style.css in chrome)
if u want to display the less file in browser we want to give --source- map =style.map
Cd users\desktop\workout > lessc cool.css > style.css --source- map =style.map
Step5 :
Now you can go and see the folder (workout) . style.css and style.map will be generated
Step6 :
Output
No comments:
Post a Comment