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

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 :

Article Tags :

CSS

Web Technologies