Javascript 你能用更少的时间来部分匹配类吗？

我是less的新手，希望与类进行部分匹配，以便在不编写大量冗余类的情况下预处理CSS

e、 g.减：

@blue: #1f6ea9;
@white: #f5f5f5;

.square(@size, @color) {
    width: @size;
    height: @size;
    background-color: @color;
}

CSS:

HTML:

//这是行不通的

这样做似乎很容易让事情变得复杂，而且不是动态的或可管理的。理想情况下，我想定义一个主元素，所以我们可能有.square（）和.circle（）。然后让类的其余部分定义传递给该函数的变量

div[class^="square-"](@size, @color) {
    .square(@size, @color);
}

div[class^="circle-"](@size, @color) {
    .circle(@size, @color);
}

<div class="circle-150"></div>       // generate 150px circle, default color
<div class="circle-300-blue"></div>  // generate 300px blue circle
<div class="square-blue"></div>      // generate blue square, default size
<div class="square-50-white"></div>  // generate 50px white square

div[class^=“square-”]（@size，@color）{
.正方形（@大小，@颜色）；
}
div[class^=“圆圈-”]（@size，@color）{
.圆圈（@大小，@颜色）；
}
//生成150px圆形，默认颜色
//生成300px蓝色圆圈
//生成蓝色正方形，默认大小
//生成50px的白色正方形

---

非常感谢您在这件事上给予的任何帮助。

您可以用更少的时间完成这件事

减：

这是它生成的css

CSS:

---

我想你可能是过度工程化了。CSS的一个优点是具有可以组合的不同样式，而不是使用较少的函数进行所有组合。假设您有3个形状、3个维度和3种颜色。使用普通的旧css，这需要9个带规则的选择器：

.square  { border-radius: 0; }
.rounded { border-radius: 5px; }
.oval    { border-radius: 50%; }

.dim-150 { width: 150px; height: 150px; }
.dim-200 { width: 200px; height: 200px; }
.dim-250 { width: 250px; height: 250px; }

.bg-red   { background-color: #ff2020; }
.bg-white { background-color: #f5f5f5; }
.bg-blue  { background-color: #1f6ea9; }

如果我们少创建3个函数，然后生成组合，我们将有3^3=27个规则（不包括函数本身）。这成了一个指数问题。只需添加一个形状、一个尺寸和一种颜色，就可以得到256条规则，而分离碎片则需要12条规则

---

另一个想法是，当命名类时，作者被鼓励描述内容，而不是内容的呈现。这个想法是，在未来，样式比类更可能发生变化

例如，假设您有一个红色和椭圆形的通知。您可以给它设置

class=“oval bg red”

类。但是，如果您以后想将这些通知设置为黄色和圆形正方形，该怎么办？您可以修改css，但是类名将与样式不匹配（.bg red给出黄色背景），并且重用同一类的其他元素将在您不希望的情况下更改颜色。这是行不通的，因此您必须在HTML中访问站点上的每个地方并更改类

---

相反，如果我们将通知设置为

class=“notification warning”

类，该怎么办。通知现在描述站点上的所有通知，警告描述您的所有警告。首先，您希望将它们从椭圆形更改为方形，因此需要修改单个css规则。您决定重新发布站点，并使用一条规则将所有警告从红色更改为黄色。我认为同样的情况也适用于较少的变量。使用@accept color、@bg theme等，而不是那些永远不会改变的@blue、@white。

理想情况下，您应该避免使用非语义类名称。与尝试在类名中设置按钮样式相比，使用

.buttonAdd

和

.buttonRemove

（或其他）更好。考虑到Jonathan下面的回答和您的评论：定义值数组（颜色、形状、大小等）然后从这些数组生成任何内容都不是问题（包括具有这些设置的所有可能排列的类）-就像你在大多数其他语言中做的一样，但在CSS上下文中没有真正意义。命名CSS约定和指数问题很好。我只是尝试为设计团队动态类命名约定。他们负责小的编辑，但不幸的是完全破坏了CSS的所有方面。看我希望它能在更具动态性的类上发挥一些魔力，为设计师打造超级接吻。@user2680673请注意，如果您将上述示例中的经典类名更改为部分匹配（例如

.circle

->

[class*=“circle”]

，

.bg red

[class*=“red”]

等等）实际上，你会得到你最初计划的东西（甚至是纯CSS（3），没有任何预处理）。

div[class^="square-"](@size, @color) {
    .square(@size, @color);
}

div[class^="circle-"](@size, @color) {
    .circle(@size, @color);
}

<div class="circle-150"></div>       // generate 150px circle, default color
<div class="circle-300-blue"></div>  // generate 300px blue circle
<div class="square-blue"></div>      // generate blue square, default size
<div class="square-50-white"></div>  // generate 50px white square

@blue: #1f6ea9;
@white: #f5f5f5;

.square(@size, @color) {
    width: @size;
    height: @size;
    background-color: @color;
}


.square {
    &-150{
        &-white{
            .square(150px, @white);
        }
        &-blue{
            .square(150px, @blue);
        }
    }   
    &-200{
        &-white{
            .square(200px, @white);
        }
        &-blue{
            .square(200px, @blue);
        }
    }   
}

.square-150-white {
  width: 150px;
  height: 150px;
  background-color: #f5f5f5;
}
.square-150-blue {
  width: 150px;
  height: 150px;
  background-color: #1f6ea9;
}
.square-200-white {
  width: 200px;
  height: 200px;
  background-color: #f5f5f5;
}
.square-200-blue {
  width: 200px;
  height: 200px;
  background-color: #1f6ea9;
}

.square  { border-radius: 0; }
.rounded { border-radius: 5px; }
.oval    { border-radius: 50%; }

.dim-150 { width: 150px; height: 150px; }
.dim-200 { width: 200px; height: 200px; }
.dim-250 { width: 250px; height: 250px; }

.bg-red   { background-color: #ff2020; }
.bg-white { background-color: #f5f5f5; }
.bg-blue  { background-color: #1f6ea9; }