Referring to a CSS attribute inside the same class [duplicate] - html

Question

This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 6 years ago.
I want to darken each button when you hover over them and I have no idea how to refer to the original color value in the :hover attribute.
//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%);
}
}

Answer 1

There doesn't seem to be a way yet as of this writing, but another way to approach organizing your code to achieve the same end result (keeping things DRY) would be:
//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
Caveat: requires you to change your classes to .btn-1, .btn-2, so on.

Answer 2

You can put the hover style inside each class, like this:
//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%);
}
}

Answer 3

You can mimic the darken effect using opacity.
// Mimic the darken effect on hover
.btn-tumblr,
.btn-twitter {
opacity: .7;
&:hover {
opacity: 1;
}
}