0

I have a need to prefix Bootstrap classNames. I don't mean using .my-prefix .bs-class as a wrapper, I mean actually prefixing BS classNames eg; .my-bs-class.

I've explored doing this programmatically (using a Gulp process) however some of the selectors are a bit complex for me to safely convert, let alone treating mixin complexity.

So I wondered about extending BS with LESS functionality and while with simple use cases this works fine, eg;

// BS
.btn {
  color:red;
}
// Prefixed BS
.my-btn {
  &:extend(.btn);
}

Doing the same with nested selectors does not work as I'd hope, and I suspect it won't.

Taking this codepen: http://codepen.io/davewallace/pen/MJrMVj you can see a simple example of what I would like to happen, however the CSS output is:

.btn-group .btn,
.ui-btn-group .btn {
  color: red;
}

as opposed to:

.btn-group .btn,
.ui-btn-group .ui-btn {
  color: red;
}

Is what I am trying to achieve possible, if so, how?

Note: I'm open to alternative approaches to prefixing BS, however the technical debt incurred by modifying BS source is most undesirable, unless it is minimal.

EDIT: I have broadened this question to include any CSS pre-processors, so as to not restrict ourselves to LESS, if another technology can achieve it.

danjah
  • 2,939
  • 2
  • 30
  • 47
  • 1
    No, it is not possible via Less. (Personally I'd simply use basic regex replacing like `.` -> `.prefix-`, though I wonder if you care of the BS scripts to go broken since they also hardcoded to use particular class names). – seven-phases-max Jan 31 '17 at 03:54
  • Nah, we're avoiding the JS as our components need to accomodate things that BS won't/isn't. I tried out https://www.npmjs.com/package/gulp-rcs and the author is helping which is great, however there are complexities which make me wonder if their is a safer solution than regex. Thanks for confirming that it is not possible with LESS. Let's give it a day or two and if you post that as an answer and nobody can offer anything further - you win points :D – danjah Jan 31 '17 at 04:05
  • This was the output of gulp-rcs after the author tweaked it, btw: https://gist.github.com/davewallace/2955dd243a74ecf0c84bec64ecd9e498 (prefixed BS classes with `ui__`). You can see it is still not comprehensive, and is also performed on compiled CSS rather than LESS. – danjah Jan 31 '17 at 04:09
  • @seven-phases-max hey there, please note my edit note, in case this changes anything you can suggest. – danjah Jan 31 '17 at 21:04

1 Answers1

1

Nofix for this, so my answer officially consists of "switch to a framework that supports prefixing and component isolation"; we chose UIKit.

danjah
  • 2,939
  • 2
  • 30
  • 47