更少的CSS如何在mixin中修改父属性 [英] LESS CSS how to modify parent property in mixin

问题描述

我正在寻找一种语法更少的东西来做类似的事情:

I'm looking for a less syntax to do something like that:

.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%);
}

我知道如何使用参数或全局变量来执行此操作，但是悬停效果选择不一定总是设计为更改背景颜色.

I know how to do that with a parameter or a global variable but the hover-effect schould not always be designed to change the background-color.

推荐答案

如果您的意思是.button-default和.button-warning是.button-hover-effect-mixin的那些父代"，那么您的朋友就是

If you mean the .button-default and .button-warning are those "PARENT"s for the .button-hover-effect-mixin then your friends are 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，这可能不是您所需要的，请参见

You also can make this variable to be a parameter of .button-hover-effect-mixin. Additionally don't miss & near :hover selector (without & it expands to .button-default :hover and this probably is not what you need, see Nesting).

而且...如果方向正确，并且这些颜色是按钮之间的唯一区别，那么我会将整个代码段重写为类似这样的内容:

And... if this goes in right direction and those colors are the only difference between the buttons I would rewrite the whole snippet to something like this:

.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%);
        }
    }
}

这篇关于更少的CSS如何在mixin中修改父属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！