Question

在Bootstrap 2.3.1中，有一部分：

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  outline: 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

我想在WordPress中使用Bootstrap。在WordPress中，有一个名为.active的类，而不是.current-menu-item。因此，如果我不想触摸引导程序CSS，那么在我的自定义样式表中，如果我想重复相同的代码而略有不同，例如：

.dropdown-menu > .current-menu-item > a { bla bla bla }

新思路？

是否有一种表达这些课程的新方法，就像.a = .b一样？

用我的例子：

.dropdown-menu > .active > a = .dropdown-menu > .current-menu-item > a,
.dropdown-menu > .active > a:hover = .dropdown-menu > .current-menu-item > a:hover,
.dropdown-menu > .active > a:focus = .dropdown-menu > .active > a:focus { bla bla bla }

我知道它可以通过逗号分隔的类完成，但是以这种方式再次提到语句。我不想要这么大的代码块重复。

Answer 1

CSS没有本地方法可以做到这一点。如果要将样式从一个选择器“复制”到另一个选择器，则需要一个CSS预处理器。

.foo {
    background: blue;
}

萨斯：

.bar {
    @extend .foo;
}

LESS：

.bar {
    .foo;
}

Answer 2

您可以尝试使用LESS。在这里，您可以创建变量，并执行以下操作：

@color: #4D926F;

.dropdown-menu > .active > a,
.dropdown-menu > .current-menu-item > a {@color;}

如何在CSS中表示.abc = .xyz（不是以逗号分隔）？

新思路？

2 个答案: