Less.js Variables Multiple & Selector
Last Updated :
28 Apr, 2025
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 it can be used by the web browser. 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.
Multiple & Parent selector:
In Multiple & selector, the & operator is used to refer to a parent selector repeatedly without using its name. So the multiple & parent selector specifies that a selector & operator can be used more than once. It 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:
.link
{
& + & {
}
}
Example 1: The following examples demonstrates the use of Less.js Variables Multiple & Selector in the Less file.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Multiple & Example</title>
<link rel="stylesheet" href="style.css"
type="text/css" />
</head>
<body>
<h1 class="link">
Welcome to GeeksforGeeks!!</h1>
<h3 class="linksh"><b>
Less.js Variables Multiple & Selector</b></h3>
</body>
</html>
style. less: Create the Less file.
CSS
@rd: green;
@blue: blue;
@bg: cyan;
.link {
& + & {
color: @bg;
}
& & {
color: @blue;
}
&& {
color: @rd;
}
&,
&ish {
color: @bg;
}
}
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
.link + .link {
color: cyan;
}
.link .link {
color: blue;
}
.link.link {
color: green;
}
.link,
.linkish {
color: cyan;
}
Output:
Example 2: The following examples demonstrates the use of Less.js Variables Multiple & Selector in the Less file.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"
type="text/css" />
<title>Changing Selector Order Example</title>
</head>
<body>
<div class="header">
<div class="menu">
<h1>GeeksforGeeks</h1>
<h3>Less.js Variables Multiple & Selector</h3>
</div>
</div>
</body>
</html>
style. less: Create the Less file.
CSS
@color: red;
@bg: blue;
@rd: green;
.header {
.menu {
border-radius: 1px;
border: 5px solid @bg;
& {
padding-left: 200px;
}
}
}
h1 {
color: @rd;
text-align: center;
}
h3 {
color: @color;
text-align: center;
}
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
.header .menu {
border-radius: 1px;
border: 5px solid blue;
padding-left: 200px;
}
h1 {
color: green;
text-align: center;
}
h3 {
color: red;
text-align: center;
}
Output:
Reference: https://lesscss.org/features/#parent-selectors-feature-multiple-
Similar Reads
Less.js Variables Changing Selector Order
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 s
3 min read
Less.js Parent Selectors
The Parent Selectors in LESS.js are used to select elements with the specific parents when modifying an existing class or pseudo-class to an existing selector. It is denoted by the ‘&’ (ampersand) operator. It is important in the pre-processor to have a clean code with the hierarchy of like DOM
3 min read
JQuery Multiple ID selectors
Given an HTML document and the task is to select the elements with different ID's at the same time using JQuery. Approach: Select the ID's of different element and then use each() method to apply the CSS property on all selected ID's element.Then use css() method to set the background color to pink
2 min read
Less.js Variables Overview
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
2 min read
Less.js Variables
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 s
4 min read
Less.js Variables Properties as Variables
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 s
3 min read
Less.js Variables Default Variables
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 s
3 min read
Less.js @import At-Rules multiple
Less.js 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 boosts the functionality of CSS. Cross-browser interoperability is offered via LESS. CSS is improved and compiled for usa
3 min read
jQuery multiple classes Selector
The jQuery multiple class selector is used to select multiple classes of an HTML document. Syntax: $(".class1, .class2, .class3, ...")Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example, we will select the multiple classes by us
1 min read
jQuery multiple elements Selector
The jQuery multiple elements Selector is used to select multiple elements of an HTML document. Syntax: $("element1, element2, element3, ...")Parameter: element: This parameter is required to specify the elements to be selected.Example 1: In this example, we will select the multiple elements by using
1 min read