引用同一类中的 CSS 属性 [重复]答案

【问题标题】：Referring to a CSS attribute inside the same class [duplicate]引用同一类中的 CSS 属性 [重复]
【发布时间】：2016-07-31 05:07:53
【问题描述】：

当您将鼠标悬停在每个按钮上时，我想使它们变暗，但我不知道如何引用 :hover 属性中的原始颜色值。

//buttons.scss

//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;

//Put these colors into classes
.btn-tumblr
{
    color: $tumblr-color;
}

.btn-twitter
{
    color: $twitter-color;
}

//Add the "darkens when hovered over" attribute
.btn-tumblr,
.btn-twitter
{
    &:hover
    {
        color: darken(/*ATTRIBUTE OF THE ORIGINAL COLOR HERE*/, 20%);
    }
}

【问题讨论】：

标签： html css sass

【解决方案1】：

您可以将悬停样式放在每个类中，如下所示：

//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;

.btn-tumblr {
    color: $tumblr-color;
    &:hover {
        color: darken($tumblr-color, 20%);
    }
}

.btn-twitter {
    color: $twitter-color;
    &:hover {
        color: darken($twitter-color, 20%);
    }
}

【讨论】：

【解决方案2】：

在撰写本文时似乎还没有一种方法，但是另一种方法来组织您的代码以实现相同的最终结果（保持事物干燥）是：

//buttons.scss

//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;
$colors: $tumblr-color, $twitter-color;

//Mixins
@mixin thedarkening($color) {
  color: darken($color, 20%);
}

@for $i from 1 through length($colors) {
    .btn-#{$i} {
        color: nth($colors, $i);
        &:hover {
            @include thedarkening(nth($colors, $i));
        }
    }
}

Demo

警告：要求您将课程更改为 .btn-1、.btn-2，等等。

【讨论】：

这不能回答所提出的问题。

【解决方案3】：

您可以使用不透明度来模拟变暗效果。

// Mimic the darken effect on hover

.btn-tumblr,
.btn-twitter {
  opacity: .7;
  &:hover {
    opacity: 1;
  }
}

【讨论】：