Could not resolve the variable "$color" within "bg_button $color, $style"

[henyulee]

need help !!!
:root {
--color-light:#e4e3dd;
--color-dark:#333333;
--color-info:#10a5e8;
--color-warning:#d2ae0a;
--color-danger:#f90d0d;
--color-success:#359c08;
}
@define-extend rounded_button {
display: inline-block;
border-radius:4px;
padding:5px 10px;
font: var(--color-light) 14px ;
background-color: var(--color-dark)
}

@define-mixin bg_button $color, $style {
.btn-$(color) {
@extend rounded_button;
background-color: $style;
&:hover {
opacity: 0.9;
}
}
}

@mixin bg_button light, var(----color-light);
@mixin bg_button success,var(----color-success);

[diverent2]

Hey there,
first of all, it would be highly appreciated if you could try to add some proper formatting, explanation of what you are trying to achieve as well as structure to your issues. This will help both you and others to solve your problem. 😉
Thank you!

So what it seems you are trying to achieve is the following:
You´ve wanted to create a mixin and it isn´t working.

This project uses postcss advanced variables to enable this feature.
I think you were using the postcss mixin syntax which differs.

You will need this syntax instead using
@mixin to define the function and
include to use it:

//simplified

@mixin bg_button($color: colorDefault, $style: styleDefault) {
	.btn-$(color) {
		@extend rounded_button;
		background-color: $style;
	}
}

@include bg_button(red, green);

Hope I could help.

[paulshryock]

I was getting the precss could not resolve the variable ___ within ___ error, and I was able to resolve the issue by changing my processing workflow. I'm using PostCSS inside a Gulp task, and my gulp.src included all my CSS files, including the files which had variables. I changed my gulp.src to only include my style.css file, which imports other files which define and make use of various variables, and that resolved the problem.