Less.js Variables Overview
Last Updated :
22 Aug, 2022
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.
Syntax:
@variable_name: value;
Parameter values:
- @variable_name: It represents any variable name having some meaning to it.
- value: It represents any assigned numeric value, dimension, or any value depending on the use.
Example 1: This example describes the basic use of the Variables in LESS.js.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
type="text/css"
href="style.css">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>LESS_Variables</title>
</head>
<body>
<h1>Variables in LESS </h1>
<p>
variables in LESS has same functionalities
as any other programming language does.
</p>
<p>
we are going to change the color of heading
and the background color of the paragraphs.
you can have as many different colors of your
choice as possible. this is what makes the use
of variables so handy.
</p>
</body>
</html>
|
style.less
@color_for_text: red;
@color_for_background: lightgreen;
h1{
color: @color_for_text;
}
p{
color: @color_for_text;
background-color: @color_for_background;
}
|
style.css
h1 {
color: red;
}
p {
color: red;
background-color: lightgreen;
}
|
Command to compile :
lessc style.less style.css
Output: After compiling is done, the following output will be displayed.
Example 2: This is another example that describes the implementation of the LESS.js Variables.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
type="text/css"
href="style.css">
<title>LESS_Variables code2</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
|
style.less
@color_text:green;
@color_background:black;
body{
background-color: @color_background;
}
h1{
color: @color_text;
}
|
style.css
body {
background-color: black;
}
h1 {
color: green;
}
|
Now, compile the less file into a CSS file and the following output will be displayed:
Output:
Reference: https://lesscss.org/features/#variables-feature-overview
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...