一个CSS块可以使用另一个块吗？

Question

我可以在css中使用这样的东西吗？

.bordered  
{
    border: 10px dashed yellow;
}

form input 
{
    use .bordered;
    font-size: 10px;
}

或者如果不将每个css代码块写入html元素，如何实现？

Answer 1

好吧，你总是可以在输入中添加类。

---

你可以规范化/重构你的类，使它们更通用（但不要过度使用它）。例如：

.bordered {
    border: 10px dashed yellow;
}
.smaller {
    font-size: 10px;
}

<form>
    <input class="bordered">
    <input class="smaller">
    <input class="bordered smaller">
</form>

Answer 2

除非您使用CSS预处理器，否则您可以这样做：

.bordered,
form input {
    border: 10px dashed yellow;
}


form input  {
   font-size: 10px;
}

或者，如果您想避免逐个列出所有选择器，您可以创建一个具有该样式的类并将该类添加到元素

Answer 3

快速回答：

.bordered, form input { border: 10px dashed yellow; }
form input { font-size: 10px; }

可重复使用代码的解决方案是使用CSS Preprocessor - LESS或SASS，或者您可以创建一个新类并随意调用它并为其添加样式。

您应该使用CSS预处理器的十大理由 - https://www.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor

参考文献：

• LESS
• SASS