【问题标题】:Using a mixin nested inside another selector/class使用嵌套在另一个选择器/类中的 mixin
【发布时间】:2015-06-16 01:12:35
【问题描述】:

我正在尝试根据上下文使 Mixin 输出两种不同的东西。像这样:

.seticon(@r,@g,@b) {
    b {
        background-color: rgb(@r,@g,@b);
    }
    &.act b {
        .box-shadow(0 0 5px 1px rgba(@r,@g,@b,0.45));
    }
    &.act.hover b {
        background: #000;
        .box-shadow(inset 0 0 0 3px rgb(@r,@g,@b) !important;
    }
}

.nonreceivable {
    .seticon(@r,@g,@b) {
        b {
            background: #000 !important;
            .box-shadow(inset 0 0 0 2px rgb(@r,@g,@b));
        }
    }
}

现在.seticon 按预期工作,但.nonreceivable .seticon 似乎不起作用。这是一个错误,还是我做错了什么,或者这不是 Less 开发人员的意图?你会如何解决这个问题?

【问题讨论】:

    标签: css less less-mixins


    【解决方案1】:

    nonreceivable 类是否应用于同一个元素或父元素?如果它是父母,它应该工作。否则,在.section 前面放一个&

    .nonreceivable {
     &.seticon(@r,@g,@b) {
        b {
            background: #000 !important;
            .box-shadow(inset 0 0 0 2px rgb(@r,@g,@b));
        }
    }
    }
    

    【讨论】:

    • 在 mixin 名称前添加 & 并不会真正起作用。它实际上会导致编译错误(至少在最新版本的编译器中)。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-04-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-26
    相关资源
    最近更新 更多