Question

我有一个组件jl-btn，它可以有不同的color（这里是CSS属性），具体取决于它可能受到影响的其他类。这些类可以与<a>元素一起使用，我希望在一个Less语句中说:hover和:focus颜色必须与正常状态相同。

.jl-btn {
  color: blue;

  &.jl-btn-important {
    color: red;
  }

  &:hover, &:focus {
    color: ???,
    text-decoration: none
  }
}

我尝试将color设置为inherit或initial，但会将其设置为黑色。我喜欢的是：悬停和：如果有jl-btn-important类，则将焦点颜色设置为红色，否则为蓝色。

有什么想法吗？

[编辑] 我的不好，我忘了告诉我使用bootstrap的脚手架来定义a:hover, a:focus的样式

Answer 1

选项1：（如果没有其他设置覆盖默认行为）

理想情况下，不在color和:hover选择器下添加任何:focus设置本身应该可行。下面的代码片段就是证明。但如果它不起作用，那么有一些其他选择器会覆盖它。

＆＃13;

.jl-btn {
  color: blue;
}
.jl-btn.jl-btn-important {
  color: red;
}
.jl-btn:hover,
.jl-btn:focus {
  text-decoration: none;
}

＆＃13;

<a class='jl-btn' href='#'>Hello</a>
<a class='jl-btn jl-btn-important' href='#'>Hello</a>

＆＃13;

选项2：（如果某个其他选择器覆盖默认行为，如Bootstrap或其他库）

在这种情况下，您可以将Less代码修改为如下所示。这会将相同的颜色应用于默认的:hover和:focus选择器，而无需在每个选择器下重复color。

.jl-btn {
  &, &:hover, &:focus{
    color: blue;
  }
  &.jl-btn-important {
    &, &:hover, &:focus {
      color: red;
    }
  }
  &:hover, &:focus {
    text-decoration: none
  }
}

以下代码段基于以上Less代码的已编译CSS输出。

＆＃13;

.jl-btn,
.jl-btn:hover,
.jl-btn:focus {
  color: blue;
}
.jl-btn.jl-btn-important,
.jl-btn.jl-btn-important:hover,
.jl-btn.jl-btn-important:focus {
  color: red;
}
.jl-btn:hover,
.jl-btn:focus {
  text-decoration: none;
}

＆＃13;

<a class='jl-btn' href='#'>Hello</a>
<a class='jl-btn jl-btn-important' href='#'>Hello</a>

＆＃13;

选项3：（如果您有多个修饰符并希望避免手动编写）

如果您觉得多次编写选择器也是不必要的重复，那么您可以编写一个mixin（如下面的代码块中所示），让它为所有必需的选择器设置color。

.jl-btn {
  .set-anchor-colors(blue); /* mixin to set default, hover and focus color */
  &.jl-btn-important {
    .set-anchor-colors(red); /* mixin to set default, hover and focus color */
  }
  &:hover, &:focus {
    text-decoration: none;
  }
}

.set-anchor-colors(@color){
  &, &:hover, &:focus{
    color: @color;
  }
}

Answer 2

.jl-btn {
    color: blue;
    &.jl-btn-important {
        color: red;
        &:hover,
        &:focus {
            &:extend(.jl-btn);
            text-decoration: none;
        }
    }
}

请记住，扩展复制所有css属性，而不仅仅是颜色。

您还可以使用变量作为属性值blue。

如何设置：使用Less将颜色悬停到正常颜色？

2 个答案: