Question

我阅读了一些＆符号主题，但我无法找到解决问题的方法。这是我想要实现的输出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;
}

你能给出任何建议让这段代码按照我的预期运行，我只知道目标父选择器的插件和逗号标志。

Answer 1

此Less代码将实现您的目标：

.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

使用＆符号来定位父选择器

1 个答案: