Are there fewer options for reducing input type selectors?

Question

I wrote this css:

.form-group > input[type="text"],
.form-group > input[type="text"]:hover,
.form-group > input[type="text"]:active,
.form-group > input[type="password"],
.form-group > input[type="password"]:hover,
.form-group > input[type="password"]:active,
.form-group > input[type="email"],
.form-group > input[type="email"]:hover,
.form-group > input[type="email"]:active {
    max-width: 400px;
}

and I know that I can cut it by writing

.form-group > input[type="text"],
.form-group > input[type="password"],
.form-group > input[type="email"] {
    max-width: 400px;
    &:hover,
    &:active {
    }
}

Well, the second part of the code is what I really wrote, the first is just for the drama of the question, I think;)

Now I wonder if there is a function that allows you to group input type selectors, something like this:

.form-group > input {
        $:text,password,email
    max-width: 400px;
    &:hover,
    &:active {
    }
}

Answer 1

You can use less than regular CSS:

.form-group > input {
  &[type="text"], &[type="password"], &[type="email"] {
     &:hover, &:active {
       max-width: 400px;
     }
  }
}

Ampersand ( &) refers to an element input, and you simply add a rule for the attributetype

Answer 2

No, Less does not provide such a function.

SCSS "" , , , @each directcive.

Answer 3

@yoavmatchulsky solution does not apply to cases where no :hoveror :active. Here would be a complete solution that would cover everything that you wanted in the first block of question code:

.form-group > input {
  &[type="text"], &[type="password"], &[type="email"] {
    &, &:hover, &:active {
      max-width: 400px;
    }
  }
}

This will:

.form-group > input[type="text"],
.form-group > input[type="password"],
.form-group > input[type="email"],
.form-group > input[type="text"]:hover,
.form-group > input[type="password"]:hover,
.form-group > input[type="email"]:hover,
.form-group > input[type="text"]:active,
.form-group > input[type="password"]:active,
.form-group > input[type="email"]:active {
  max-width: 400px;
}