我知道代码一团糟，但我需要知道是否有机会以正确的方式完成这项工作。提前谢谢。
<!DOCTYPE html>
<body>
<div class="row1">1</div>
<div class="row2">2</div>
<div class="row3">3</div>
<style>
@class{
color: white;
border-radius: 5px;
height: 20px;
width: 40px;
}
.row1{
background: red;
style: @class;
}
.row2{
background: green;
style: @class;
}
.row3{
background: grey;
style: @class;
}
</style>
</body>
</html>
您可以在纯CSS中执行类似的操作，而无需调用预处理器。
虽然CSS的函数并不像您想要的那样使用，但在您的特定情况下，您可以选择任何类名以"row"开头的元素。
[class^='row'] {
color: white;
border-radius: 5px;
height: 20px;
width: 40px;
}
.row1 {
background: red;
}
.row2 {
background: green;
}
.row3 {
background: grey;
}<div class="row1">1</div>
<div class="row2">2</div>
<div class="row3">3</div>最常见的方法是将两个类应用于一个元素：
<div class="row row1">1</div>
<div class="row row2">2</div>
<div class="row row3">3</div>
和
.row {
color: white;
border-radius: 5px;
height: 20px;
width: 40px;
}
.row1 { ... }
.row2 { ... }
.row3 { ... }