Unfolding selector list

[SergeVDev]

Is it possible to convert this:

a, b // <-- some LESS magic here
{
  c: d;
}

…into:

a
{
  c: d;
}

b
{
  c: d;
}

I want to emulate forgiveness of :is() where :is() is not applicable (with pseudo-elements).

[dosubot[bot]]

You can achieve this in Less using the each() function, which allows you to iterate over a list of selectors and apply the same properties to each one individually. Here's how you can do it:

@selectors: a, b;

each(@selectors, {
  @{value} {
    c: d;
  }
});

This will output:

a {
  c: d;
}

b {
  c: d;
}

This approach effectively splits the selector list into individual selectors with the same properties ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[SergeVDev]

Both each and callback approach (a mixin with a passed @ruleset) look ugly.

[SergeVDev]

Also, it just doesn't work. Here's code:

// https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track
// https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track
@range-track: &::-webkit-slider-runnable-track, &::-moz-range-track;

…

// Provides *forgiving selector parsing*.
// Since :is() is not applicable to pseudo-elements, this mixin should be used instead.
.any(@selector-list, @ruleset)
{
	each(@selector-list,
	{
		@{value}
		{
			@ruleset();
		}
	});
}

Trying to use:

input[type="range"]
{
	.reset-control();
	.vertical-control();
	.intrinsic-sized-background-and-element('../images/joystick.png');

	.any(@range-track,
	{
		background: blue;
	});
}

Boom! The result:

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
  background: blue;
}

Not the expected unfolded list:

input[type="range"]::-webkit-slider-runnable-track {
  background: blue;
}

input[type="range"]::-moz-range-track {
  background: blue;
}

[SergeVDev]

I added length: length(@selector-list); for the testing purpose:

.any(@selector-list, @ruleset)
{
	length: length(@selector-list);
	each(@selector-list,
	{
		@{value}
		{
			@ruleset();
		}
	});
}

The length is 2, when I pass a, b and is 1, when I pass &, &.

[SergeVDev]

Well, the working solution:

// To declare a list, wrap items with quotes.

// https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track
// https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-track
@range-track: '&::-webkit-slider-runnable-track', '&::-moz-range-track';

//========================================
//                  Mixins
//========================================

// Provides *forgiving selector parsing*. Since :is() is not applicable to pseudo-elements, this mixin should be used instead.
.any(@selector-list, @ruleset)
{
	each(@selector-list,
	{
		@selector: e(@value);

		@{selector}
		{
			@ruleset();
		}
	});
}

Using either:

input[type="range"]
{
	.any(@range-track,
	{
		background: yellow;
	});
}

Or with a list of normal selectors, such as @selectors: div, span, p;.