CODEWITHSUNDEEP
cssless
eqrakhattak
eqrakhattak

Reputation: 563

Nesting different classes in the same selector in LESS

I have 2 article selectors named .style1 and .style2,

Expected CSS output:

.tiles article.style1 > .image:before {
    background-color: #f2849e;
}

.tiles article.style2 > .image:before {
    background-color: #7ecaf6;
}

My Attempt at LESS:

.tiles{
    article{
        .style1 {
          > .image {
              & ::before {
                  background-color: #f2849e;
              }
          }
        }
      
        .style2 {
          > .image {
              & ::before {
                  background-color: #7ecaf6;
              }
          }
        }
    }
}

I tried to do it as shown above but the CSS result I get is:

.tiles article .style1 > .image ::before {
  background-color: #f2849e;
}
.tiles article .style2 > .image ::before {
  background-color: #7ecaf6;
}

which in my opinion, refers the .style1 and .style2 classes as the children of article, and not the identifiers of the article selector. How do you think should I write it?

Upvotes: 1

Views: 29

Answers (2)

notAbubakar
notAbubakar

Reputation: 44

You can also write it as:

.tiles {
  article.style1 {
    >.image {
      &:before {
        background-color: #f2849e;
      }
    }
  }
  article.style2 {
    >.image {
      &:before {
        background-color: #7ecaf6;
      }
    }
  }
}

Upvotes: 1

T J
T J

Reputation: 43156

Use the & parent selector like:

.tiles{
  article{
    &.style1 {
      > .image {
          & ::before {
              background-color: #f2849e;
          }
      }
    }
  
    &.style2 {
      > .image {
          & ::before {
              background-color: #7ecaf6;
          }
      }
    }
  }
}

Upvotes: 0

Related Questions