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

UPDATE: If you can't modify external files just redefine the selectors, and add missing states:

.btn {
  // not adding anything here, won't affect existing style
  &:hover {
    // adding my own hover state for .btn
    background: yellow;
    ...
  }
}

// this will make your foo button appear as in external style
// and have the :hover state just as you defined it above
.btn-foo {
  .btn;
}

Better now? :)

---

You don't need pseudo class. It will just work :)

Try this:

.btn {
  background: yellow;

  &:hover { // define hover state here
    background: green;
  }
}

button {
  .btn;
}

Each element you create will inherit whatever was defined, including hover state. I think it's one of the main amazing features of LESS.

Hope this helps.