Php 将多个css类分组到另一个类

我的页面有特定的风格，无论这个人来自哪个城市或州。因此，如果他们来自新泽西州，背景会是红色的。现在我要做的是：

HTML/PHP

<div class="<?php echo $row["location"]; ?>">
  <div class="Container">
    <div class="Top-Bar">Name</div>
    <div class="Bottom-Bar">Location</div>
  </div>
</div>

当我想在有颜色的页面中添加一个新元素时，我必须在每一行添加类似

.Pennsylvania.Middle Bar

的内容

有更好的方法吗？我知道我可以用颜色代码创建一些数据库，也可以用这种方式创建样式，但我更希望样式表上有尽可能多的内容来提高性能。

为什么不写呢

<div class="<?php echo $row["location"]; ?>">
  <div class="Container">
    <div class="Top Bar">Name</div>
    <div class="Bottom Bar">Location</div>
  </div>
</div>

如果你想要另一个元素，你可以写，比如

<div class="Middle Bar">Population</div>

你会写信的

.Pennsylvania .Middle.Bar
  font-weight: bold;
}

---

使用scss/sass，您可以实现嵌套类，这将帮助您实现目标

$pallete:（白色：#fff，黑色：#000，红色：#d43862，绿色：#00a665，橙色：#ff9100，蓝色：#008acd，重影：rgb（129，129，129））；
@每个$palleteColor，$pallete中的颜色{
.col-#{$palleteColor}{
颜色：$color；
&-变暗{
颜色：变深（$color，20%）；
}
}
.bg col-#{$palleteColor}{
背景色：$color；
&-变暗{
背景色：深色（20%）；
}
}
}

在这种情况下，我不推荐使用足够多的CSS预处理器。有一些，SASS，LESS，Stylus等

尽管您应该意识到，不必减少输出的CSS数量，但是，这使得编写长CSS变得更加容易和快速

它们有各种各样的智能功能，其中一个可以在这里帮助您

在SASS中，它们被称为映射

因此：

$states-bg: (
  pa: red,
  nj: blue,
  ny: green,
  ca: orange,
  tx: rebeccapurple
);


@each $state, $bg-color in $states-bg {
  .#{$state} .state-bg-color {
    background: $bg-color;
    }
}

实际输出如下：

.pa .state-bg-color {
  background: red;
}

.nj .state-bg-color {
  background: blue;
}

.ny .state-bg-color {
  background: green;
}

.ca .state-bg-color {
  background: orange;
}

.tx .state-bg-color {
  background: rebeccapurple;
}

我们通过给地图命名

$state bg

来定义地图，然后地图中的每个“state”项目都有相应的颜色值

如果我们使用一个类名作为背景色，这会自动地显示出来

需要维护的一个列表，可根据需要扩展

你可以在这里玩这个：

.Pennsylvania .Middle.Bar
  font-weight: bold;
}

$states-bg: (
  pa: red,
  nj: blue,
  ny: green,
  ca: orange,
  tx: rebeccapurple
);


@each $state, $bg-color in $states-bg {
  .#{$state} .state-bg-color {
    background: $bg-color;
    }
}

.pa .state-bg-color {
  background: red;
}

.nj .state-bg-color {
  background: blue;
}

.ny .state-bg-color {
  background: green;
}

.ca .state-bg-color {
  background: orange;
}

.tx .state-bg-color {
  background: rebeccapurple;
}