Open In App

Less.js Variables Combinatorial Explosion

Improve
Improve
Like Article
Like
Save
Share
Report

LESS works as an extension to the regular CSS and gives it some additional features to work with. , which is used to generate all possible combinations of the selector’s list which are separated by a comma.

In this article, we are going to learn about the combinatorial explosion which is available in Less.js. 

Syntax:

& + & {
    <css-property> : value;
}

Parameter:

  • It does not accept any parameters.

Example 1: In this example, we will generate all possible selector combinations of p and h2 elements and apply the text color to the contents of the respective elements, using the combinatorial explosion.

index.html:

HTML




<!DOCTYPE html>
<html lang="en">
<head>  
    <title>Variable Combinatorial explosion</title>
    <style>
        p, h2 {
            font-style: italic;
        }
        p + p,
        p + h2,
        h2 + p,
        h2 + h2 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Variable Combinatorial explosion</h2>   
    <p>GeeksforGeeks</p>
</body>
</html>


style.less:

CSS




p, h2 {
    font - style: italic;
    & + & {
        color: green;
    }
}


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




p,
    h2 {
    font - style: italic;
}
p + p,
    p + h2,
    h2 + p,
    h2 + h2 {
    color: green;
}


Output:

 

Example 2: In this example, we will use more than two selectors to generate all possible combinations of p, h2, li elements and apply the green color to them by using combinatorial explosion.

index.html:

HTML




<!DOCTYPE html>
<html lang="en">
<head
    <title>Variable Combinatorial explosion</title>
    <style>
        p,
        h2,
        li,
        a {
            font-style: italic;
        }
        p + p,
        p + h2,
        p + li,
        p + a,
        h2 + p,
        h2 + h2,
        h2 + li,
        h2 + a,
        li + p,
        li + h2,
        li + li,
        li + a,
        a + p,
        a + h2,
        a + li,
        a + a {
            color: green;
        }
    </style>
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2> This is heading 2 </h2>
    <p>This is paragraph</p>
    <li>list item 1</li>
    <li>list item 2</li><br/>
    <a href="www.geeksforgeeks.com">GeeksforGeeks</a>
</body>
</html>


style.less:

CSS




p, h2, li, a {
    font-style: italic;
    & + & {
        color: green;
    }
}


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




p,
h2,
li,
a {
    font-style: italic;
}
p + p,
p + h2,
p + li,
p + a,
h2 + p,
h2 + h2,
h2 + li,
h2 + a,
li + p,
li + h2,
li + li,
li + a,
a + p,
a + h2,
a + li,
a + a {
    color: green;
}


Output:

 

Reference: https://lesscss.org/features/#parent-selectors-feature-combinatorial-explosion



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