How to denote .abc = .xyz in CSS (not comma-separated)?

Question

In Bootstrap 2.3.1, there is a portion:

.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);
}

I want to use Bootstrap in WordPress. In WordPress, instead of .active, there is a class named .current-menu-item. So if I don't want to touch the bootstrap CSS, and so then in my custom stylesheet, if I want to repeat the same code with a slight difference, like:

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

NEW THOUGHT ?

• Is there a new way to denote those classes, something simply like .a = .b?

With my example:

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

I know it can be done, simply by comma-seperated classes, but in that way the statements are to be mentioned again. I don't want such huge code block's repeat.

Answer 1

CSS has no native way to do this. If you want to "copy" styles from one selector to another, you need a CSS preprocessor.

.foo {
    background: blue;
}

Sass:

.bar {
    @extend .foo;
}

LESS:

.bar {
    .foo;
}

Answer 2

You could try with LESS. Here you can create variables, and do something like this:

@color: #4D926F;

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