Open In App

How to define scope in the context of variables in LESS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Variable scope is used to specify the availability of variables in certain parts of the code. Firstly, the variables are searched from the local scope (i.e the variables which are declared within the code block of a particular selector); if they are not found, then they are searched from the parent scope by the compiler.

Let’s create an index.html with the following data:

index.html

HTML




<!DOCTYPE html>
<html>
<head>
    <title>LESS Scope</title>
    <link rel="stylesheet"
             type="text/css"
             href="style.css" />
</head>
<body>
    <h1>Example of Scope</h1>
    <h1>Welcome to GFG</h1>
      <h1 class="example">
      Here is an illustration of variables in LESS.
    </h1>
</body>
</html>


Now let’s create a file names “style.less”. Here we use the extension “.less” instead of “.css”.

style.less

Javascript




@var: @scope;
@scope: 30px; //Global Variable
.example {
font-size: @var;
@scope:16px; //Local Variable
color: red;
}


Before compiling the code make sure you put “index.html” and “style.less” in the same folder.

To compile the less file to a CSS file, write the following command:

less style.less style.css

Execute the above command, it will create the “style.css” file automatically with the following code :

style.css

CSS




.example {
  font-size: 16px;
  color: red;
}


Output :

 



Last Updated : 23 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads