Less.js Variables Changing Selector Order

Last Updated : 06 Dec, 2022

LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that the web browser can use it. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.

Description for variables: The variables in Less.js govern the common values used in a single location, ie, they are known to keep values stored in them and can be used anywhere within the definition of code. LESS allows you to use these variables to change the specific value in the entire code. It might get troublesome when we need to change one particular value in our CSS code, but with the help of variables, it can easily be done.

Changing Selector Order: Changing Selector Order can be useful to prepend a selector to the inherited (parent) selectors. This can be done by putting the & after the current selector.

For example, when using Modernizr, you might want to specify different rules based on supported features:

Syntax:

& {  
    padding-right:100px;  
}

Example 1: The following example demonstrates the use of Less.js Variables Changing Selector Order in Less.

HTML

<!DOCTYPE html>   
<html>   
<head>   
   <link rel="stylesheet" href="style.css" 
        type="text/css" />   
   <title>Changing Selector Order Example</title>   
</head>   
<body>   
    <div class="order">   
        <div class="selector">   
          <h1>GeeksforGeeks</h1>   
          <p>Less.js Variables Changing Selector Order</p>   
        </div>   
    </div>   
</body>   
</html>

style.less:

CSS

@bg:blue; 
  .order {   
    .selector {   
      border-radius: 1px;   
      border: 5px solid @bg;   
      & {   
        padding-right: 100px;   
      }   
  }   
}   
h1{ 
  color:green; 
} 
p{ 
  color:red; 
} 

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

CSS

.order .selector { 
  border-radius: 1px; 
  border: 5px solid blue; 
  padding-right: 100px; 
} 
h1 { 
  color: green; 
} 
p { 
  color: red; 
} 

Output:

Example 2: The following example demonstrates the use of Less.js variables changing selector order in Less. We have used hover in the following example.

HTML

<!DOCTYPE html>   
<html>   
<head>   
   <link rel="stylesheet" href="style.css" 
         type="text/css" />   
   <title>Changing Selector Order Example</title>   
</head>   
<body>   
    <div class="order">   
        <div class="selector">   
            <h1>GeeksforGeeks</h1>   
            <p>Less.js Variables Changing Selector Order</p>   
        </div>   
    </div>   
</body>   
</html>

style.less: Create the less file with the following code.

CSS

@bg:blue; 
.order {   
  .selector {   
    border-radius: 1px;   
    border: 5px solid @bg;   
    & {   
          padding-left: 500px;   
    }   
  }   
}   
h1:hover{ 
  color:darkgreen; 
} 
  
p:hover{ 
  color:red; 
} 
body{ 
  background:black; 
} 

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

style.css

CSS

.order .selector { 
    border-radius: 1px; 
      border: 5px solid blue; 
      padding-left: 500px; 
} 
h1:hover { 
      color: darkgreen; 
} 
p:hover { 
      color: red; 
} 
body { 
      background: black; 
} 