Description
LESS provides support for some arithmetical operations such as plus
(+), minus (-), multiplication (*) and division (/) and they can operate
on any number, color or variable. Operations save lot of time when you
are using variables and you feel like working on simple mathematics.
Example
The below example demonstrates use of operations in the LESS file:
<html>
<head>
<title>Less Operations</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Example using Operations</h1>
<p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
Next, create file
style.less.
style.less
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
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
.myclass {
font-size: 20px;
color: green;
}
Output
Let's carry out the following steps to see how above code works:
- Save the above html code in operations.html file.
- Open this HTML file in a browser, an output as below gets displayed.
No comments:
Post a Comment