Less是否具有缩短输入类型选择器的功能？

Question

我写过这个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;
}

我知道我可以通过写作来缩短这一点

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

好吧,第二个代码部分是我真正写的东西,第一个代码只是针对问题的戏剧性,我猜;)

现在我想知道是否有一个功能允许对输入类型选择器进行分组,如下所示:

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

Answer 1

您可以使用较少的常规CSS适用:

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

ampersand(&)引用该input元素,您只需为该type属性添加规则