CSS-Less class extend class with pseudo class

Question

I was wondering how I could do something like the following with less css:

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo {
  .btn;
  &         


        

Answer 1

In Less 1.4.0(1.4.1?)

This:

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo:extend(.btn all) { 
}

Expands to this:

.btn,
.btn-foo {
  color: black;
}
.btn:hover,
.btn-foo:hover {
  color: white;
}

Be cautious though, this:

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.abc .btn {
  margin: 2px;
}

.btn-foo:extend(.btn all) {

}

Will output this:

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.abc .btn {
  margin: 2px;
}

.btn-foo:extend(.btn all) {

}

I have not looked into SASS more than half an hour, but I believe the later case is its default (or only) @extend behavior.