How to represent a variable in Less ?
Last Updated :
04 Oct, 2021
LESS stands for Leaner Style Sheets. It is a backward-compatible language extension for CSS. One of its features is that it lets you use variables in the style sheet. Variables can be used to store CSS values that may be reused. This makes it easier for the user by letting them define commonly used values in a single location.
Defining a variable: Variables in Less are represented with an at (@) sign. We can assign a value using a colon (:).
CSS
@color-primary: #009900;
@background-dark: #272822;
@background-light: #fff;
|
Using a variable as values to properties:
CSS
.card {
color: @lt-gray;
background: @background-light;
font-size: @font-2;
}
|
Using a variable as parameters to functions:
CSS
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);
|
The below examples demonstrate the use of Less variables.
Example 1:
gfg.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="./css/styles.css">
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<div class="odd">Paragraph 1</div>
<div class="even">Paragraph 2</div>
<div class="odd">Paragraph 3</div>
<div class="even">Paragraph 4</div>
<div class="odd">Paragraph 5</div>
</body>
</html>
|
style.less
@green-color: #25C75C;
@black-color: #000;
@background-dark: #272822;
@background-light: #ebebeb;
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
color: @green-color;
}
div {
padding: 10px;
}
.odd {
color: @black-color;
background-color: @background-light;
}
.even {
color: @green-color;
background-color: @background-dark;
}
|
File name style.css which we get after pre-compiling style.less
style.css
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
color: #25C75C;
}
div {
padding: 10px;
}
.odd {
color: #000;
background-color: #ebebeb;
}
.even {
color: #25C75C;
background-color: #272822;
}
|
Output:
Example 2:
gfg.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="./css/styles.css">
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<div>
<p><a class="link" href="#">
Link 1</a> will take you to Page 1.
</p>
</div>
</body>
</html>
|
style.less
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);
@green-color: #25C75C;
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
color: @green-color;
}
div {
padding: 10px;
}
.link {
color: @link-color;
text-decoration: none;
}
.link:hover {
color: @link-color-hover;
cursor: pointer;
}
|
File name style.css which we get after pre-compiling style.less
style.css
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
h1 {
color: #25C75C;
}
div {
padding: 10px;
}
.link {
color: #428bca;
text-decoration: none;
}
.link:hover {
color: #3071a9;
cursor: pointer;
}
|
Output:
Without hovering
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...