Nesting multiple same type class inside one parent

Question

I want to create classes like below:

.colored{
     &{
          .red{background-color:red;}
          .blue{background-color:blue;}
          .gray{background-color:gray;}
      }
}

and it is not working but if I write like this:

.colored{
          &.red{
              background-color:red;
          }
          &.blue{
              background-color:blue;
          }
          &.gray{
              background-color:gray;
          }
}

then it works. Are there any reasons why the first version does not work as expected?

Harry · Answer 1 · 2016-05-15T12:39:11.060

3

Reason:

It is because of the way nesting works (and is supposed to work) in Less. When you nest a selector under another selector, the inner selector is considered as applicable for an element which is a child of the element represented by the outer selector.

The below is code

.colored{
    &{
        .red{background-color:red;}
        .blue{background-color:blue;}
        .gray{background-color:gray;}
    }
}

is equivalent to the following (because & will be replaced by the parent selector which is .colored)

.colored{
    .red{background-color:red;}
    .blue{background-color:blue;}
    .gray{background-color:gray;}
}

Now as I mentioned earlier, this would compile to .colored .red, .colored .blue, .colored .gray (note the space between the selectors).

On the other hand when you insert the & immediately before .red, .blue, .gray, it means that the parent selector and the nested selector apply to the same element (and not a child). The selectors that it would output is .colored.red, .colored.blue, .colored.gray (note that there is no space).

Solution:

This is the same code as in your question and it is the recommended solution. I am posting it again in the answer only to make it complete.

.colored{
    &.red{
        background-color:red;
    }
    &.blue{
        background-color:blue;
    }
    &.gray{
        background-color:gray;
    }
}

edited May 15 '16 at 12:39

answered May 15 '16 at 11:42

Harry

87,580
25
202
214

i if i write as you say i must use colored class in parent element like this but i do not want it. i want to use like this +3,00$ – maviofis May 15 '16 at 12:34
2

The code blocks provided in my answer are to show what is *wrong*, the correct solution is the second snippet in your question itself. I have avoided posting it again and just explained why the other one doesn't work. – Harry May 15 '16 at 12:36
it didn't help . i look forward different way for solve it – maviofis May 18 '16 at 08:32
@maviofis: Can you then clarify what output you are expecting (the compiled CSS)? I thought you already mentioned in your question that the second method works (which is the same as the recommended solution). – Harry May 18 '16 at 08:33
output must be like that : .colored.red, .colored.blue, .colored.gray – maviofis May 18 '16 at 11:25
@maviofis: Did you see the code under the **Solution** part? It is the same as the second snippet in your question and that is the only possible solution :) – Harry May 18 '16 at 11:36

Nesting multiple same type class inside one parent

1 Answers1