Description
LESS maps JavaScript code with manipulation of values and uses
predefined functions to manipulate HTML elements aspects in the style
sheet. It provides several functions to manipulate colors such as round
function, floor function, ceil function, percentage function etc.
Example
The below example demonstrates use of functions in the LESS file:
<html>
<head>
<title>Less Functions</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Example using Functions</h1>
<p class="mycolor">LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
Next, create file
style.less.
style.less
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width);
}
You can compile the
style.less file to
style.css by using the following command:
lessc style.less style.css
Next execute the above command, it will create
style.css file automatically with the below code:
style.css
.mycolor {
color: #FF8000;
width: 100%;
}
Output
Let's carry out the following steps to see how above code works:
- Save the above html code in functions.html file.
- Open this HTML file in a browser, an output as below gets displayed.
No comments:
Post a Comment