LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that it can be used by the web browser. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.
Description for variables: The Variables in LESS.js govern the common values used in a single location, ie, they are known to keep values stored in them and can be used anywhere within the definition of code. LESS allows you to use these variables to change the specific value in the entire code. It might get troublesome when we need to change one particular value in our CSS code, but with the help of variables, it can easily be done.
Variables in less:
- Overview: Variables make our code easier to maintain by giving you a way to control those values from a single location:
Syntax:
a,
.link {
color:blue;
}- Variable Interpolation: Variable interpolation is the process of evaluating an expression or literal containing one or more variables, yielding output in which the variables are replaced with their corresponding values. The variables can also be used in other places like selector names, property names, URLs, and @import statements.
Syntax:
@my-selector: banner;
.@{my-selector}
{
//property values
}- Variable Variables: In Less.js, we can define a variable's name using another variable.
Syntax:
@primary-color: blue;
@bgcolor: red;
.section
{
@color: primary-color;
.element
{
color: @@color;
}
}- Lazy Evaluation: In lazy evaluation, the variables do not have to be declared before being used.
Syntax:
.lazy-eval
{
height: @va;
}- Properties as variables (NEW!): In properties as variables (NEW), You can easily treat properties like variables using the $prop syntax. Sometimes this can make your code a little lighter.
Syntax:
.widget
{
color:blue;
background-color: $color;
}- Default variables: The default variable has the ability to set a variable only when it's not already set. This feature is not required because variables can be easily overridden by defining them afterward.
Syntax:
@color:red;
// first declaration of @color
@import "style.less";
// this will override @color defined previously
@color: green;
p {
color : @color;
}
Example 1: This example demonstrates the use of the default variable in Less.js.
Filename: index.html
html
<!DOCTYPE html>
<head>
<link rel="stylesheet"
href="Three.css" type="text/css" />
</head>
<body>
<div><br><br>
<h1>Welcome to GeeksforGeeks</h1>
<h3><b>Less.js Variable</b></h3>
</div>
</body>
</html>
@import "One.less";
@color: green;
@normal:black;
h1
{
text-align: center;
color : @color;
}
h3
{
text-align: center;
color: @normal;
}
Now, to compile the above LESS code to CSS code, run the following command:
less Two.less Three.css
The compiled CSS file comes to be:
Filename: Two.css
CSS
h1 {
text-align: center;
color: green;
}
h3 {
text-align: center;
color: black;
}
Output:
Example 2: The following example, demonstrates the use of variables in Less.js.
Syntax:
@my-selector: banner;
.@{my-selector}
Filename: index.html
html
<!DOCTYPE html>
<head>
<link rel="stylesheet"
href="style.css" type="text/css" />
</head>
<body class="banner3">
<div><br><br>
<h1 class="banner">Welcome to GeeksforGeeks</h1>
<h3 class="banner2"><b>Less.js Variable</b></h3>
</div>
</body>
</html>
@primary:black;
@color:green;
@normal:white;
@my-selector: banner;
@hello:banner2;
@one:banner3;
.@{my-selector} {
font-weight: bold;
line-height: 20px;
color: @color;
margin: 0 auto;
text-align: center;
}
.@{hello} {
text-align: center;
color: @normal;
}
.@{one}{
background-color: @primary;
}
Now, to compile the above LESS code to CSS code, run the following command:
less styles.less style.css
The compiled CSS file comes to be:
Filename: style.css
css
.banner {
font-weight: bold;
line-height: 20px;
color: green;
margin: 0 auto;
text-align: center;
}
.banner2 {
text-align: center;
color: white;
}
.banner3 {
background-color: black;
}
Output:
Reference: https://lesscss.org/features/#variables-feature
Similar Reads
ES6 | Variables
A variable is a named container in the memory, that stores the values. In simple words, we can say that a variable is a container for values in Javascript. The ES6 Variable names are called identifiers. The rules to keep in mind while naming an identifier. An identifier can contain alphabets and num
4 min read
Less.js Variables Overview
The Variables in LESS.js govern the common values used in a single location, ie, they are known to keep values stored in them and can be used anywhere within the definition of code. LESS allows you to use these variables to change the specific value in the entire code. It might get troublesome when
2 min read
Less.js Browser Modify Variables
LESS (Leaner Style Sheets) Â is an extension or superset to the CSS, which basically enhances the abilities of normal CSS and provides it with programmable superpowers like variables, functions, loops, various methods to do certain tasks, etc. In this article, we are going to take a look at updating
3 min read
Less.js Variable Interpolation
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. This dynamic style sheet language gives CSS more functionality. LESS provides interoperability across browsers. A programming language called CSS pre-processor is
3 min read
Less.js Lazy Variables Evaluation
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that boosts the functionality of CSS. Cross-browser interoperability is offered via LESS. CSS is improved and compiled for usa
3 min read
JS++ | Variables and Data Types
In this tutorial, we will introduce variables in JS++. Let’s start with an example. Create a new folder and name it "Variables". Then create a new file and name it "Variables.jspp". Write in the following code: external $; string firstString = "This is a string."; int firstInt = 1; double firstDoubl
6 min read
Less.js Merge
LESS is a Leaner Style Sheets, which is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites.Less.js Merge is used to extend or aggregate multiple properties into a comma or space separated list under a single property. So merge
2 min read
Less.js Variables Default Variables
LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
3 min read
Less.js Variables Multiple & Selector
LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
3 min read
JavaScript Variables
Variables in JavaScript can be declared using var, let, or const. JavaScript is dynamically typed, so variable types are determined at runtime without explicit type definitions.JavaScript var keywordJavaScript let keywordJavaScript const keyword JavaScriptvar a = 10 // Old style let b = 20; // Prfer
5 min read