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 {
    }
}

- marue

Answer 1

您可以像使用常规CSS一样使用less：

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

&符号（&）引用了input元素，您只需为type属性添加规则即可。

- yoavmatchulsky

Answer 2

“@yoavmatchulsky的解决方案”没有涵盖没有:hover或:active的情况。这里是一个完整的解决方案，可以覆盖您在问题的第一个代码块中想要的所有内容：

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

这句话的意思是：“这就变成了：”。

.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;
}

- Dan VanWinkle

Answer 3

不，Less没有提供这样的功能。

SCSS有更多的“编程”方法，因此您可以使用@each指令来实现您想要的功能。

- markusthoemmes

---

尽管你确实回答了我的问题，而Yoavmatchulsky没有，但我仍然接受了他的答案，因为他提供了进一步缩短代码的解决方案。可能你没想到我对CSS知识极其缺乏... - marue

我没有回答什么问题？：\ @marue - yoavmatchulsky

我太蠢了，不知道普通的CSS可以提供某个功能。对此我很抱歉。 - marue