What I am trying to do is be able to set a color for each button.
Right now all of the buttons are one color, how would I be able to give each button a different color?
https://jsfiddle.net/bns4y8eg/
I was thinking this:
<div class="playButton" style="margin: 2px 0 0 390px; $color: red;
But that doesn’t work.
I was told to use @mixin and @include but I am not familiar with SCSS.
That’s html and SCSS only works on the css file. The css is complied and then output as raw css. The scss parser does not parse the html.
If you used css variables you could change the colors based on extra classes but of course you couldn’t use them in your scss functions such as darken etc.
:root { --mycolor: blue;}
button { background: var(--mycolor);}
.button2 { --mycolor: red;}
There’s is probably a way you can do similar in SCSS but I believe it would require extend, loops and mixins which is not my area.
I was told not to use @extend
Since when have you done what you’ve been told 
I don’t use SCSS anyway as I don’t like it but others find it useful. I’ve never had the need to use it apart from some convoluted demos.
Maybe @RyanReese can tell you how to arrange for different values of $color as he is more familiar with preprocessors than me.
There’s an issue, it doesn’t look the same as what the code was originally.
What has to be fixed and adjusted to the multi colored code so it looks the same as the original?
Original is the left image
Original Code:
https://jsfiddle.net/f9h1wu75/
Multi Colored Code:
https://jsfiddle.net/a4nkzLbm/
.playButton {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 150px;
height: 195px;
background-color: black;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
border-radius: 5px;
padding: 20px;
perspective: 700px;
&.active .button {
transform: translateZ(20px) rotateX(25deg);
box-shadow: 0 -10px 20px $color;
.light {
animation: flicker 0.2s infinite 0.3s;
}
.shine {
opacity: 1;
}
.shadow {
opacity: 0;
}
}
.button {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
transform-origin: center center -20px;
transform: translateZ(20px) rotateX(-25deg);
transform-style: preserve-3d;
background-color: #9b0621;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
background: linear-gradient(
darken($color, 25%) 0%,
darken($color, 33%) 30%,
darken($color, 33%) 70%,
darken($color, 25%) 100%
);
background-repeat: no-repeat;
&::before {
content: "";
background: linear-gradient(
rgba(white, 0.8) 10%,
rgba(white, 0.3) 30%,
darken($color, 35%) 75%,
darken($color, 45%)) 50% 50% / 97% 97%,
darken($color, 20%)
;
background-repeat: no-repeat;
width: 100%;
height: 50px;
transform-origin: top;
transform: rotateX(-90deg);
position: absolute;
top: 0;
}
.button::after {
content: "";
background-image: linear-gradient(
darken($color, 35%),
darken($color, 45%)
);
width: 100%;
height: 50px;
transform-origin: top;
transform: translateY(50px) rotateX(-90deg);
position: absolute;
bottom: 0;
box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}
.light {
opacity: 0;
animation: light-off 1s;
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(
adjust-hue(lighten($color, 20%), 35),
$color 40%,
transparent 70%
);
}
.dots {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(
transparent 30%,
rgba(darken($color, 35%), 0.7) 70%
);
background-size: 10px 10px;
}
.characters {
position: absolute;
width: 100%;
height: 100%;
background:
linear-gradient(white, white) 50% 20%/5% 20%,
radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
background-repeat: no-repeat;
}
.shine {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
opacity: 0.3;
position: absolute;
width: 100%;
height: 100%;
background:
linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
background-repeat: no-repeat;
}
.shadow {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
opacity: 1;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
background-repeat: no-repeat;
}
}
}
@keyframes flicker {
0%, 100% { opacity: 1; }
80% { opacity: 0.8; }
}
@keyframes light-off {
0% { opacity: 1; }
80% { opacity: 0; }
}
// ––––––––––––––––––––––––––––––––––
// Play Button Variation Mixin
// ––––––––––––––––––––––––––––––––––
@mixin play-button-variation($color: white){
&.active .button { box-shadow: 0 -10px 20px $color; }
.button {
background: linear-gradient(
darken($color, 25%) 0%,
darken($color, 33%) 30%,
darken($color, 33%) 70%,
darken($color, 25%) 100%
);
&::before {
background: linear-gradient(
rgba(white, 0.8) 10%,
rgba(white, 0.3) 30%,
darken($color, 35%) 75%,
darken($color, 45%)
) 50% 50% / 97% 97%,
darken($color, 20%);
}
.button::after {
background-image: linear-gradient(
darken($color, 35%),
darken($color, 45%)
);
}
.light {
background-image: radial-gradient(
adjust-hue(lighten($color, 20%), 35),
$color 40%,
transparent 70%
);
}
.dots {
background-image: radial-gradient(
transparent 30%,
rgba(darken($color, 35%), 0.7) 70%
);
}
}
}
If you use the same code then it looks the same to me.
$color: blue;
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.wrap {
position: relative;
width: 582px;
height: 717px;
}
.playButton {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 150px;
height: 195px;
background-color: black;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
border-radius: 5px;
padding: 20px;
perspective: 700px;
}
.playButton.active .button {
transform: translateZ(20px) rotateX(25deg);
box-shadow: 0 -10px 20px $color;
}
.playButton.active .button .light {
animation: flicker 0.2s infinite 0.3s;
}
.playButton.active .button .shine {
opacity: 1;
}
.playButton.active .button .shadow {
opacity: 0;
}
.playButton .button {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
transform-origin: center center -20px;
transform: translateZ(20px) rotateX(-25deg);
transform-style: preserve-3d;
background-color: #9b0621;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
background: linear-gradient(darken($color, 25%) 0%, darken($color, 33%) 30%, darken($color, 33%) 70%, darken($color, 25%) 100%);
background-repeat: no-repeat;
}
.playButton .button::before {
content: "";
background: linear-gradient(rgba(white, 0.8) 10%, rgba(white, 0.3) 30%, darken($color, 35%) 75%, darken($color, 45%)) 50% 50% / 97% 97%, darken($color, 20%);
background-repeat: no-repeat;
width: 100%;
height: 50px;
transform-origin: top;
transform: rotateX(-90deg);
position: absolute;
top: 0;
}
.playButton .button::after {
content: "";
background-image: linear-gradient(darken($color, 35%), darken($color, 45%));
width: 100%;
height: 50px;
transform-origin: top;
transform: translateY(50px) rotateX(-90deg);
position: absolute;
bottom: 0;
box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}
.playButton .light {
opacity: 0;
animation: light-off 1s;
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(adjust-hue(lighten($color, 20%), 35), $color 40%, transparent 70%);
}
.playButton .dots {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(transparent 30%, rgba(darken($color, 35%), 0.7) 70%);
background-size: 10px 10px;
}
.playButton .characters {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
background-repeat: no-repeat;
}
.playButton .shine {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
opacity: 0.3;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
background-repeat: no-repeat;
}
.playButton .shadow {
transition: all 0.3s cubic-bezier(1, 0, 1, 1);
opacity: 1;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
background-repeat: no-repeat;
}
@keyframes flicker {
0% {
opacity: 1;
}
80% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
@keyframes light-off {
0% {
opacity: 1;
}
80% {
opacity: 0;
}
}
// ––––––––––––––––––––––––––––––––––
// Play Button Variation Mixin
// ––––––––––––––––––––––––––––––––––
@mixin play-button-variation($color: white){
&.active .button { box-shadow: 0 -10px 20px $color; }
.button {
background: linear-gradient(
darken($color, 25%) 0%,
darken($color, 33%) 30%,
darken($color, 33%) 70%,
darken($color, 25%) 100%
);
&::before {
background: linear-gradient(
rgba(white, 0.8) 10%,
rgba(white, 0.3) 30%,
darken($color, 35%) 75%,
darken($color, 45%)
) 50% 50% / 97% 97%,
darken($color, 20%);
}
.button::after {
background-image: linear-gradient(
darken($color, 35%),
darken($color, 45%)
);
}
.light {
background-image: radial-gradient(
adjust-hue(lighten($color, 20%), 35),
$color 40%,
transparent 70%
);
}
.dots {
background-image: radial-gradient(
transparent 30%,
rgba(darken($color, 35%), 0.7) 70%
);
}
}
}
// ––––––––––––––––––––––––––––––––––
// Include Play Button Variations
// ––––––––––––––––––––––––––––––––––
.playButton.a {
@include play-button-variation(#ff1818);
}
.playButton.b {
@include play-button-variation(cyan);
}
.playButton.c {
@include play-button-variation(gold);
}
.playButton.d {
@include play-button-variation(red);
}
.playButton.e {
@include play-button-variation(dodgerblue);
}
.playButton.f {
@include play-button-variation(skyblue);
}
.playButton.g {
@include play-button-variation(#59f059);
}
.playButton.h {
@include play-button-variation(yellowgreen);
}
.playButton.i {
@include play-button-variation(darkseagreen);
}
You seem to have changed the nesting and lost the css in the middle.
You’d need to define a mixin like so:
@mixin customButton($color: red) {
color: $color;
}
Then
.button {
@include customButton(#000);
}
I’m not sure how your HTML is set up but that’s how you use mixins to dynamically set colors.
That’s a very basic example .
Thanks Ryan.
I don’t thing SCSS can do what’s wanted here. We’d have to redeclare all the properties that use $color so there’s no benefit.
If it was a CSS custom variable we could just say.
:root{
--color:red;
}
.b2{--color:blue}
.b3{--color:green}
All descendants of this elements use the redefined variable without any extra code. However CSS variables can’t be used because of the lighten, darken and hue SCSS functions acting on various values.
I think the simplest answer is just to use a different SCSS variable and redefine the values again.
I was able to get this far in fixing the code.
When it is off, there is not supposed to be a gray horizontal line there.
Multi Colored Code
https://jsfiddle.net/r6djwa4v/
Original Version: That gray line is not there.
https://jsfiddle.net/f9h1wu75/
This section deals with that part of the code.
How would that be fixed?
&::before {
background: linear-gradient(
rgba(white, 0.8) 10%,
rgba(white, 0.3) 30%,
darken($color, 35%) 75%,
darken($color, 45%)
) 50% 50% / 97% 97%,
darken($color, 20%);
}
I think this way is much better.
Got it.
https://jsfiddle.net/jcpd47en/
$color: #ff1818;
$color2: orange;
$color3: orangered;
$color4: gold;
$color5: blue;
$color6: cyan;
$color7: skyblue;
$color8: yellowgreen;
$color9: darkseagreen;
That’s what I suggested
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.