How can I use CSS variables with mixins in my stylesheets?

How can I use CSS variables with mixins in my stylesheets?

You can use CSS variables within mixins by defining the variables in your CSS and then referencing them in your mixin. For example, you can create a mixin that uses a variable for colors or sizes.

Can you show me a code example of that?

Sure! Here's a simple example:

$primary-color: #3498db;

@mixin button($bg-color: $primary-color) {
  background-color: var(--bg-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.button {
  @include button();
}

In this example, the mixin button uses a CSS variable for the background color.

What if I want to change the variable value dynamically?

You can change the value of the CSS variable dynamically using JavaScript or by changing the variable in your CSS. For example, you can set the variable on a parent element and it will affect all child elements that use it.