css - 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 一样使用 less:

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

& 符号 (&) 引用 input 元素，您只需为 type 属性添加规则