0

I'm working on a Rails application with Bootstrap, and I'm using semantic class names in my HTML. This means I'm using extend a lot. However, LESS generates some incorrect CSS. I'm not sure if it's a bug or if I'm doing something wrong.

Here's some LESS code to reproduce the issue:

@import "bootstrap";

body#home input {
   &:extend(.form-control all);
}

My input is styled correctly, but the additional following CSS is generated:

textarea.form-control,
textareabody#home input {
  height: auto;
}

.form-inline body#home input {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

I understand that this happens because extend is just syntactic sugar for search and replace, but isn't there any workaround for the issue?

Alessandro Desantis
  • 14,098
  • 1
  • 26
  • 32
  • 1
    If you use *exact* matches for `:extend` (without the `all` keyword) that shouldn't happen. – helderdarocha Jul 05 '14 at 14:55
  • I see. Unfortunately, ```.form-control``` is used in so many different forms that I'm probably better off adding a couple of classes to my inputs. – Alessandro Desantis Jul 05 '14 at 14:58
  • That's just how it is defined in [`forms.less`](https://github.com/twbs/bootstrap/blob/v3.2.0/less/forms.less#L150). Solution: don't use excessive selectors like `body#home`, it's no way better then `#body-home`, `.body-home` or even just `#home` (you don't set the same id to different elements, do you?). – seven-phases-max Jul 05 '14 at 15:00
  • Using just ```#home``` won't solve the issue, although I'll do it. I would still get something like ```textarea#home input```, which is not what I want. – Alessandro Desantis Jul 05 '14 at 15:02
  • Which means you want something that Bootstrap CSS classes were not designed for (officially they are not meant to be reused at all, see http://stackoverflow.com/questions/24113419/extending-bootstrap-3-less-btn-group-not-working/24125264#comment37200018_24113419 and other comments linked there). – seven-phases-max Jul 05 '14 at 15:06
  • Got it. So the smarter solution is to add the classes directly to my HTML, right? (I'm not sarcastic, actually asking!) – Alessandro Desantis Jul 05 '14 at 15:18
  • In context of Bootstrap, yes, its classes are designed to be used in HTML only (regardless of whatever pros/cons the non-semantic approach has). This of course does not mean you can't try to reuse some of those components, just that the results may be strange/unpredictable (and the desired stuff finally to be not reachable "the easy way" at all). – seven-phases-max Jul 05 '14 at 17:07
  • Yeah, I've seen that most Bootstrap sites (including Linode's) use the classes directly in their HTML, so I've decided to use the same approach as well. Thanks! – Alessandro Desantis Jul 05 '14 at 17:09

0 Answers0