Nesting different classes in the same selector in LESS

user_12032187 0
Viewed 26

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?

less css
2 Answers

You can also write it as:

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

Use the & parent selector like:

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