html - 使用＆符号定位父选择器

我读了一些＆主题，但找不到解决该问题的方法。这是我要实现的输出CSS：

的CSS

.box-item__info--normal,
.box-item__info--left {
    padding-left: 11px;
    padding-right: 11px;
}
.box-item__info--normal h4,
.box-item__info--left h4 {
    font-size: 1.5em;
}
.box-item__info--normal .item-price {
    float: right;
}

然后，我编写以下LESS语法：

.box-item{
    &__info{
        position: relative;
        padding: 35px 0 15px 0;

        &--normal, &--left{
            padding-left: 11px;
            padding-right: 11px;

            h4{
                font-size: @delta;
            }

            & , & .item-price{
                float: right;
            }
        }

        &--left{
            padding-top: 20px;

            h4{
                margin-bottom: 10px;
            }
        }
    }
}

将产生：

.box-item__info--normal,
.box-item__info--left {
    padding-left: 11px;
    padding-right: 11px;
}
.box-item__info--normal h4,
.box-item__info--left h4 {
    font-size: 1.5em;
}
.box-item__info--normal,
.box-item__info--left,
.box-item__info--normal .item-price,
.box-item__info--left .item-price {
    float: right;
}

您能否提供任何建议以使此代码按预期工作，我只知道目标父选择器的即插即用逗号。

最佳答案

此更少的代码将实现您想要的目标：

.box-item{
    &__info{

        &--normal, &--left{
            padding-left: 11px;
            padding-right: 11px;

            h4{
                font-size: 1.5em;
            }
        }

        &--normal{
            & .item-price{
                float: right;
            }
        }
    }
}

您不能使用双重规则&--normal, &--left{..}来实现最后一条规则，因为这也会影响.box-item__info--left .item-price

关于html - 使用＆符号定位父选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27928519/