Mixin LESS not working

[Willem-Siebe]

Hi,

When I read the docs about LESS here: http://lesscss.org/features/#mixins-feature-namespaces, I read this:

// all do the same thing
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();

Well, this is what can be found in one of the Twitter Bootstrap files (forms.less, version 2.3.2):

// INPUT GROUPS
// ------------

// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
  display: inline-block;
  margin-bottom: @baseLineHeight / 2;
  vertical-align: middle;
  font-size: 0; // white space collapse hack
  white-space: nowrap; // Prevent span and input from separating

  .add-on {
    display: inline-block;
    width: auto;
    height: @baseLineHeight;
    min-width: 16px;
    padding: 4px 5px;
    font-size: @baseFontSize;
    font-weight: normal;
    line-height: @baseLineHeight;
    text-align: center;
    text-shadow: 0 1px 0 @white;
    background-color: @grayLighter;
    border: 1px solid #ccc;
  }
}

Now, in my own LESS file I use the above code like this:

div {
    .input-prepend;
    .form-search .input-prepend;

    label {
        .input-prepend > .add-on;
    }
 }

I actually did not now why I used the “>” there, and in the docs from LESS they tell me it’s optional! So, learning from there docs this should all be the same:

        .input-prepend > .add-on;
        .input-prepend > .add-on();
        .input-prepend.add-on;
        .input-prepend.add-on();

Now the strange thing is, the last two don’t work with me… I made a codepen, and there you see it does work! Why is it not working with me? See codepen: http://codepen.io/willemsiebe/pen/kvmic. what I did found out, is that I have an other option that is not listed by LESS docs, and what does work as well:

.input-prepend .add-on;
.input-prepend .add-on();

Can anybody help me?

[Paulie_D]

Unless there is something specific in LESS (and I’m not familiar with it, I confess)

#outer > .inner;
#outer . .inner();
#outer.inner;
#outer.inner();

Do NOT all do the same thing..this on the other hand,,

// all do the same thing
#outer > .inner;
#outer > .inner();
#outer  .inner;
#outer  .inner();

[Willem-Siebe]

Hi Paulie, I have added a ticket to there Github, assuming that you are right!

https://github.com/less/less.js/issues/2116

However, did you also look at my CodePen. That file is less and there you do see that it works…

Well, I probably will get some reply on their github as well and I will update it here also.

[Paulie_D]

There is no element with a class of `.add-on’ in your Codepen is there?

I couldn’t see one.,,so that class will do nothing.

[Willem-Siebe]

Please check the answer at Github, it should do the same thing, all 6 things we mentioned. Aboud the class .add-on you are right, but I’m doing that in my less using this:

label {
                .input-prepend.add-on();
                margin-bottom: 0;
}

[Paulie_D]

It doesn’t matter AFAIK.

If the class is not added to the element it won’t be affected by the CSS.

I still disagree with the GITanswer

// all do the same thing
#outer > .inner;
#outer > .inner();
#outer  .inner;
#outer  .inner();

refer to an element with a class of .inner inside an element with an ID of #outer

#outer.inner;
#outer.inner();

refers to an element with an ID of #outer that also has a class of .inner

As I said, perhaps this is something special in LESS.

[Willem-Siebe]

Hmm, @paulie, @soronbe, if we are talking about CSS I totally agree with both of you, then it should be something specific about LESS…

[Willem-Siebe]

Huh, now I’m confused.

The “>” is sligtly different right right?

From the internet:

That means the selector div > p.some_class only selects paragraphs of .some_class that sit directly inside a div, not paragraphs that are nested further within.

[Author]

Posts