My goal is to harness the power of Sass in order to generate a reusable HTML snippet with predetermined values that can later be customized if needed. Let's imagine I am creating a button and have established some basic SCSS to make the button default to a red color:
%button-shared {
$button-color: red;
td {
border-color: $button-color;
color: $button-color;
background-color: white;
text-decoration: none;
width: 50px;
height: 15px;
border-radius: 6px;
}
}
I utilized a variable so that it could be defined in multiple locations. For instance, I desire a white button with an outlined border that matches the colored text, as shown here:
https://i.sstatic.net/tbcyO.jpg
Now, let's assume I assign different classes to my two buttons in HTML, namely button-one and button-two. My objective now is to apply the SCSS styling to these buttons by extending %button-shared to these specific classes. However, I also wish for button-one to have a different color than the default red:
.button-one {
$button-color: green;
@extend %cta-shared;
}
.button-two {
@extend %cta-shared;
}
Regrettably, this approach results in both buttons being rendered in red. How can I structure my SCSS code to easily allow for the overriding of variables?