I want to introduce a pseudo-element, say, input-text to be replaced with the following list in any context:

input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
input[type="email"],input[type="password"], input[type="date"],
input[type="month"], input[type="week"], input[type="time"],
input[type="number"], input[type="color"], textarea

For instance:

a
{
    input-text
    {
         …
    }
}

input-text.myclass
{
    …
}

How to achieve this in LESS?

It'd be the best, if I could have a variable, containing the list:

@input-text-selectors: input[type="text"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="email"],input[type="password"], input[type="date"],
    input[type="month"], input[type="week"], input[type="time"], input[type="number"],
    input[type="color"], textarea;

I want to introduce a pseudo-element, say, input-text to be replaced with the following list in any context:

input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
input[type="email"],input[type="password"], input[type="date"],
input[type="month"], input[type="week"], input[type="time"],
input[type="number"], input[type="color"], textarea

For instance:

a
{
    input-text
    {
         …
    }
}

input-text.myclass
{
    …
}

How to achieve this in LESS?

It'd be the best, if I could have a variable, containing the list:

@input-text-selectors: input[type="text"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="email"],input[type="password"], input[type="date"],
    input[type="month"], input[type="week"], input[type="time"], input[type="number"],
    input[type="color"], textarea;

• css
• less

1 Answer 1

So far, the best approach I found is the following:

@text-input: :is(input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
input[type="email"],input[type="password"], input[type="date"],
input[type="month"], input[type="week"], input[type="time"],
input[type="number"], input[type="color"], textarea
);

div > @{text-input} > div // Just for testing, not a real use-case, of course.
{
    color: red;
}

@{text-input}
{
    color: green;
}

It compiles into:

div > :is(input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
input[type="email"],input[type="password"], input[type="date"],
input[type="month"], input[type="week"], input[type="time"],
input[type="number"], input[type="color"], textarea
) > div {
  color: red;
}
:is(input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
input[type="email"],input[type="password"], input[type="date"],
input[type="month"], input[type="week"], input[type="time"],
input[type="number"], input[type="color"], textarea
) {
  color: green;
}

Now I wonder, whether can this be written better.