:extend to extend dynamically generated classes?

[maniqui]

I'm looking to extend some grid classes that are dynamically generated in Bootstrap 3.0.0.-wip.

I understand the answer to my question is no, according to this answer on SO.

(...) you need to redefine any dynamic class generations of bootstrap to be non-dynamic. Something like this:

.span3 {
  .span(3);
}

This is so the :extend(.span3) will find a hard coded class to extend to. This would need to be done for any selector string that dynamically uses .span@{index} to add the .span3.

So, I may have an answer now, but not a feature :)

I understand this is possible in Sass, as that's what is done in csswizardry-grids and unsemantic, which proves useful if used in tandem with silent classes.

I've been able to somewhat "replicate" the functionality by first compiling a set of .less file (in this case, Bootstrap's grid system), and, after that, then compiling a second set of .less files (my project) which imported the first compiled set (as if they were .less files).

[jonschlinkert]

Technically this is a feature request for extending "non-existent" classes, since (in Less.js) dynamically generated classes can't be extended until after they are generated.

Closing since the payoff isn't enough to justify the code debt. We might reconsider after 2.0, so feel free to continue the conversation here, but I think we'll need more uses cases than this to be convinced.

[maniqui]

Thanks for the feedback, jonschlinkert.

Maybe a clean way to implement this could be with an option (a flag) to do a second pass?
If that flag is on, Less.js does a first pass, ignoring any :extend. On this first pass, dynamically generated classes get generated. Then Less.js does a second pass, where it just does the :extends. Hopefully this could reduce any potential code debt of trying to do everything on a single pass.

As for presenting more uses cases & arguments, I admit I will have to think a bit more to come up with some. But the basic, general one (that is: use case: to be able to :extend() dynamically generated classes) seems to go "in the spirit" of Less and CSS pre-processing in general.

[jonschlinkert]

Ideas are always good, I can see your point about being "in the spirit of preprocessing". Let us know if you come up with more use cases (or anyone else), or if the needs is there we will reopen anytime.

[lukeapage]

I think this should be left open?

[maniqui]

Just posting to share another kind of dynamically generated class names that cannot be extended:

// Input
@block: base;

.@{block} {
    property: value;
}

.base2 {
  property: value;
}

.extended {
    &:extend(.base, .base2);
}

// Output
.base {
  property: value;
}
.base2,
.extended {
  property: value;
}

As you can see, the .base class is not being extended.

[OrganicPanda]

I just stumbled upon this when trying to extend Font-Awesome classes which are defined like:

.@{fa-css-prefix}-camera-retro { /* Stuff */ }

So using:

.my-icon :extend(.@{fa-css-prefix}-camera-retro) { /* Stuff */ }

Doesn't work but it would be nice if it did.

[vandalizmo]

+1 for that feature

[jonschlinkert]

I just noticed @lukeapage's comment about reopening. sounds good

[srsgores]

+1 for this. SASS has this feature, and it would put the two on more equal footing IMO

[jonschlinkert]

SASS has this feature, and it would put the two on more equal footing IMO

How would this improve SASS? Lol wouldn't this make Less.js even better? jk

[julien-f]

Hi, I am new to Less but I find this problem to be quite annoying too.

My use case is the same as @OrganicPanda's: I use Font-Awesome in my project and I alias some icons to more meaningful names to ease maintenance (see this code for instance).

I would like to port this project from SASS to Less but this is a blocker. 😞

IMHO, it should not matter to me whether the classes I want to extend from has been dynamically generated or not: it is an implementation detail.

At least you should put a warning concerning this behavior in the documentation.

Thank you.

[julien-f]

There is a warning about this on the new documentation, my bad.

[safareli]

+1 for this feature
I have been using sass. I decided to use less in one of my project and now I think that I made a big mistake I will not use less next time :)

[SimonHarte]

+1 for this
My case: I'm developing a grid system which is widely used in my company and I generate dynamic classes with customizable prefixes. Sadly, missing this feature, you can't extend any of the generated classes, so to apply grid styles you always have to use the classes in markup or call mixins. This feature could save a lot of duplicated code.

[lukeapage]

I will take a look at doing it on the v2 branch.

[seven-phases-max]

Merging to #2200 and #1485.