在 LESS 的同一个选择器中嵌套不同的 类
Nesting different classes in the same selector in LESS
我有 2 个 article
选择器,名称为 .style1
和 .style2
,
预期CSS输出:
.tiles article.style1 > .image:before {
background-color: #f2849e;
}
.tiles article.style2 > .image:before {
background-color: #7ecaf6;
}
我对 LESS 的尝试:
.tiles{
article{
.style1 {
> .image {
& ::before {
background-color: #f2849e;
}
}
}
.style2 {
> .image {
& ::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
选择器的标识符.
你觉得我应该怎么写?
使用 &
parent selector 如:
.tiles{
article{
&.style1 {
> .image {
& ::before {
background-color: #f2849e;
}
}
}
&.style2 {
> .image {
& ::before {
background-color: #7ecaf6;
}
}
}
}
}
也可以写成:
.tiles {
article.style1 {
>.image {
&:before {
background-color: #f2849e;
}
}
}
article.style2 {
>.image {
&:before {
background-color: #7ecaf6;
}
}
}
}
我有 2 个 article
选择器,名称为 .style1
和 .style2
,
预期CSS输出:
.tiles article.style1 > .image:before {
background-color: #f2849e;
}
.tiles article.style2 > .image:before {
background-color: #7ecaf6;
}
我对 LESS 的尝试:
.tiles{
article{
.style1 {
> .image {
& ::before {
background-color: #f2849e;
}
}
}
.style2 {
> .image {
& ::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
选择器的标识符.
你觉得我应该怎么写?
使用 &
parent selector 如:
.tiles{
article{
&.style1 {
> .image {
& ::before {
background-color: #f2849e;
}
}
}
&.style2 {
> .image {
& ::before {
background-color: #7ecaf6;
}
}
}
}
}
也可以写成:
.tiles {
article.style1 {
>.image {
&:before {
background-color: #f2849e;
}
}
}
article.style2 {
>.image {
&:before {
background-color: #7ecaf6;
}
}
}
}