LESS - Scope

Description

Variable scope specifies the place of the available variable. The variables will be searched from the local scope and if they are not available, then compiler will search from the parent scope.

Example

The following example demonstrates the use of namespaces and accessors in the LESS file −

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Now create the style.less file.

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Execute the above command; it will create the style.css file automatically with the following code −

style.css

.myclass {
   font-size: 20px;
   color: green;
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the scope.html file.

  • Open this HTML file in a browser, the following output will get displayed.

Less Scope
Advertisements