Блог

У меня есть 2 article селектора с именами .style1 и .style2 ,

Ожидаемый результат CSS:

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

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

Моя попытка СДЕЛАТЬ МЕНЬШЕ:

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

Я попытался сделать это, как показано выше, но результат CSS, который я получаю,:

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

что, по моему мнению, относится к .style1 .style2 классам и как к дочерним article , а не к идентификаторам article селектора.
Как ты думаешь, как мне это написать?

Вы также можете записать его как:

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

Используйте amp; родительский селектор, например:

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