Less Basic Tutorial
Language Features
Functions
Usage
Less Useful Resources
Selected Reading
Language Features
- Less - Parent Selectors
- Less - Merge
- Less - Loops
- Less - CSS Guards
- Less - Mixin Guards
- Less - Import Options
- Less - Import Directives
- Less - Passing Rulesets to Mixins
- Less - Mixins as Functions
- Less - Parametric Mixins
- Less - Mixins
- Less - Extend
- Less - Variables
- Less - Importing
- Less - Comments
- Less - Scope
- Less - Namespaces and Accessors
- Less - Functions
- Less - Escaping
- Less - Operations
- Less - Nested Directives and Bubbling
- Less - Nested Rules
Functions
- Less - Color Blending Functions
- Less - Color Operation
- Less - Color Channel Functions
- Less - Color Defination Functions
- Less - Type Functions
- Less - Math Functions
- Less - List Functions
- Less - String Functions
- Less - Misc Functions
Usage
- Less - Frameworks
- Less - Third Party Compilers
- Less - Editors and Plugins
- Less - GUIs
- Less - Online Compilers
- Less - Programmatic Usage
- Less - Plugins
- Less - Browser support
- Using Less In The Browser
- Less - Command Line Usage
Less Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Less - Operations
LESS - Operations
Description
LESS provides support for some arithmetical operations such as plus (+), minus (-), multippcation (*) and spanision (/) and they can operate on any number, color or variable. Operations save lot of time when you are using variables and you feel pke working on simple mathematics.
Example
The following example demonstrates the use of operations in the LESS file −
<html>
<head>
<title>Less Operations</title>
<pnk 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 the 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
Execute the above command; it will create the style.css file automatically with the following code −
style.css
.myclass {
font-size: 20px;
color: green;
}
Output
Follow these steps to see how the above code works −
Save the above html code in the operations.html file.
Open this HTML file in a browser, the following output will get displayed.
Advertisements