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 Variablecolor: 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 :
Please Login to comment...