LESS CSS如何修改mixin中的父属性

Question

我正在寻找一种更少的语法来做这样的事情：

.button-default{
  background-color: rgb(100,200,250);
  :hover{
    .button-hover-effect-mixin();
  }
}
.button-warning{
  background-color: rgb(250,100,0);
  :hover{
    .button-hover-effect-mixin();
  }
}

.button-hover-effect-mixin(){
    background-color: darken(PARENT.background-color, 50%);
}

我知道如何使用参数或全局变量来做到这一点，但悬停效果并不总是旨在改变背景颜色。

Answer 1

如果您的意思是.button-default 和.button-warning 是.button-hover-effect-mixin 的“父母”，那么您的朋友就是variables：

.button-default {
    @background-color: rgb(100, 200, 250);
    background-color: @background-color;
    &:hover {
        .button-hover-effect-mixin();
    }
}

.button-warning {
    @background-color: rgb(250, 100, 0);
    background-color: @background-color;
    &:hover {
        .button-hover-effect-mixin();
    }
}

.button-hover-effect-mixin() {
    background-color: darken(@background-color, 50%);
}

您也可以将此变量设为.button-hover-effect-mixin 的参数。此外，不要错过:hover 附近的& 选择器（没有&，它会扩展为.button-default :hover，这可能不是您需要的，请参阅Nesting）。

---

而且...如果方向正确并且这些颜色是按钮之间的唯一区别，我会将整个 sn-p 重写为如下内容：

.button(default, rgb(100, 200, 250));
.button(warning, rgb(250, 100, 0));

.button(@name, @color) {
    .button-@{name} {
        background-color: @color;
        &:hover {
            background-color: darken(@color, 50%);
        }
    }
}