Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!