Send Class with Function Variable

[kalaomer]

Hi!

I'm trying to add class rules with variable.

My code:

.some-div-adress(@class) {
    .some-div {
        @class; 
    }
}

#main-div {
    .some-div-adress(.add-class);
}

.add-class() {
  width: 100px;
}

End I want to this out put:

#main-div .some-div .add-class {
    width: 100px;
}

How can I get this output with Less?

[SomMeri]

If I understand you right, you would like this feature #965 . That is not possible at the moment, but the discussion is still going on, so feel free to add your opinion there.

What are you trying to achieve? If you are just trying to cut on repetition, then you could use selector interpolation.

@some-div-adress: ~".some-div"; //put arbitrary selector here

#main-div @{some-div-adress} .add-class {
  width: 100px;
}

If you are trying to do something more complicated, then it might not help.

Please, close sample code in three ticks, Github sends emails to people named after your variables without it. Plus this:
```
code here
```

will be formatted as

code here

[SomMeri]

I'm closing this as a duplicate of #965 , but feel free to continue the discussion or re-open if you disagree with my interpretation.

[seven-phases-max]

Btw, it is possible to achive something that looks almost like what's desired via "tagged hook/callback":

.some-div-adress(@class) {
    .some-div {
        .global-hook(@class);
    }
}

#main-div {
    .some-div-adress('.add-class');
}

.global-hook('.add-class') {
    .add-class {
        width: 100px;
    }
}

But of course #965 (comment) feature would still be great.
(It will open amusing possiblities in various kinds of metaprogrammig stuff (i.e. "extending LESS with LESS itself"). For example utilities like this one would become more natural and scope-safe).

[SomMeri]

@seven-phases-max Thank you, I forgot about mixins seeing all mixins defined in the caller. So, I'm taking back, it is possible to achieve what this issue asks for.

[kalaomer]

Well, First thanks for answers. But I have mistake for what I write to output. I want to this output;

#main-div .some-div {
    width: 100px;
}

So actually we can call any class from anywhere for example;

.some-class {
  height: 100px;
}

.any-class {
    .some-class;
}

But I try to say that call any class with variable.

.some-class {
  height: 100px;
}

@class : '.some-class';

.another-class {
  @class;
}

As a result, if we can call classes(or functions) with string variable, LESS will more dynamic syntax.

[seven-phases-max]

As a result, if we can call classes(or functions) with string variable, LESS will more dynamic syntax.

Yes, this is what #965 is about (though the discussion there is a bit wider)...

---

Speaking of the workaround I posted above - I just thought it may be not so obvious that it's a pretty much universal trick meant to be used to call any mixin (and the only downside/overhead there is that you have to "register" a particular mixin you want to be "called" within the hook - or in other words, you have to "tie" some "tag" to a mixin so you can call it indirectly)... So, let me show a more advanced example (I rename ".global-hook" to just ".call" so the syntax will look more natural):

// ...

#block-1 {
    .component(primitive-1, 1px);
}

#block-2 {
    .component(primitive-1, 2px, dotted);
    .component(primitive-2, 3px, dashed);
}

#block-3 {
    .call(primitive-3);
}

// ...

.component(@primitive, @base-size: 0, @style: solid) {
    @scale: 3;
    .call(@primitive, (@base-size * @scale), @style);
}

// ...

.primitive-1(@values) {
    border: @values blue;
}

.primitive-2(@size, @style) {
    outline: @size @style green;
}

.primitive-3() {
    width: 100px;
}

// ...
// and here's the magic:

// default .call implementation, we don't need it at all 
// but I put it here to show what I mean with "tag":

.call(@tag, @optional-arguments...) {}

// "tie" mixins to their "tags" (aka "provide .call specialization"):
// (in a real code we'll put each right near corresponding mixin,
// or even put corresponding properties right into .call specialization)

.call(primitive-1, @args...)          {.primitive-1(@args)}
.call(primitive-2, @a1, @a2, @etc...) {.primitive-2(@a1, @a2)}
.call(primitive-3)                    {.primitive-3()}

// a tag does not have to be a string (it could be anything) but LESS 
// does not allow non-escaped values with . and # as parameters so
// let's just use 'mixin-name' for mixin-name.

CSS output:

#block-1 {
  border: 3px solid #0000ff;
}
#block-2 {
  border: 6px dotted #0000ff;
  outline: 9px dashed #008000;
}
#block-3 {
  width: 100px;
}

[kalaomer]

Well, thanks for your example @seven-phases-max. Now I understand what you try to say. I will try to write with your way. But is this method very long way for call mixin? If we can call with like that call('.some-class', arg1, arg2, ...) ; or different way without write .call('.some-class', @args...) {.some-class(@args)}, isn't be good?

[seven-phases-max]

@grandsopikat

If we can call ...

Yes, please read #965 (#965 (comment) and #965 (comment) in particular)