18

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

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo {
  .btn;
  &:hover {
    .btn:hover;
  }
}

Of-course this is just an example, what need to point is if there is any way to extend the pseudo-class in order to avoid re-type the properties of :hover pseudo class everywhere I need them. I know I could create a mixin for that but I'm wondering if I could avoid it.

Thanks

panosru
  • 2,709
  • 4
  • 33
  • 39

2 Answers2

32

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 <button class='btn'> 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.

bzx
  • 1,364
  • 11
  • 10
  • yes this is what I done so far too, so I'll mark it as a correct answer since so far that I searched I didn't found any other *elegant* way to do it. The reason behind it is that I wanted to avoid the re-difinition of the styles because I wanted some elements of the layout to be updated automatically in case vendor's css get modified, but at lease by re-defining the class you'll have one place to maintain the update :) Thanks for your answer :) – panosru Feb 06 '12 at 20:36
  • thanks! if you could specify in more detail which things are vendor's and which are yours then perhaps we could look into this more. – bzx Feb 06 '12 at 20:44
  • I'm working on [integrating](https://github.com/addyosmani/jquery-ui-bootstrap/tree/Bootstrap2-Dev) Twitter Bootstrap 2 with jQuery UI Bootstrap project so bootstrap 2 is the vendor. The case I'm talking about is [this](https://github.com/addyosmani/jquery-ui-bootstrap/blob/Bootstrap2-Dev/css/less/bootstrap/buttons.less), as you can see .btn:hover is a separate definition and I would prefer it if it was &:hover inside .btn so I could easily use it [here](https://github.com/addyosmani/jquery-ui-bootstrap/blob/Bootstrap2-Dev/css/less/custom-theme/button.less) :) – panosru Feb 07 '12 at 00:32
  • 1
    got it :) my advice is - go ahead and modify Bootstrap files. i had same dilemma and i'm freely modifying those files and using GIT to cope with the new changes - they just released 2.0 so it will take looooong time before there's another major release, so you shouldn't worry about drastic changes now. really, go ahead and modify these, it makes more sense. – bzx Feb 07 '12 at 11:31
  • yeah I believe it should be modified, I'll pull a request on them :) – panosru Feb 07 '12 at 15:25
  • just do it, no need to notify TBS team ;) – bzx Feb 07 '12 at 15:32
  • I created a [pull request](https://github.com/twitter/bootstrap/pull/1801) in their repository :) – panosru Feb 07 '12 at 15:33
  • Sorry guys but Im not seeing this behaviour. My pseudo classes do not copy to mixins. https://github.com/cloudhead/less.js/issues/64 this seems to only work if you have created the pseudo class in a nested style – HaveAGuess Feb 13 '12 at 15:07
7

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.

John
  • 197
  • 2
  • 4
  • Is this documented anywhere yet? I can't find it on the official site. – ehdv Aug 15 '13 at 21:30
  • @ehdv Yes. Now extend is documented, at least on its Github page. The thing is its document is far behind its development. You may need to keep an eye on the discussions (like https://github.com/less/less.js/issues?labels=ReadyForImplementation&milestone=&page=1&state=open) – John Oct 06 '13 at 15:32