5

在 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 }

我知道它可以通过逗号分隔的类来完成，但这样就可以再次提及这些语句。我不希望如此巨大的代码块重复。

4

2 回答 2

6

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

.foo {
    background: blue;
}

萨斯：

.bar {
    @extend .foo;
}

较少的：

.bar {
    .foo;
}
于 2013-05-30T18:26:16.290 回答
2

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

@color: #4D926F;

.dropdown-menu > .active > a,
.dropdown-menu > .current-menu-item > a {@color;}
于 2013-05-30T18:27:16.360 回答