Skip to content

Allow for CSS variables to be used with mixins#96

Open
kmonahan wants to merge 2 commits intocsstools:mainfrom
kmonahan:fix-css-variables-in-mixins
Open

Allow for CSS variables to be used with mixins#96
kmonahan wants to merge 2 commits intocsstools:mainfrom
kmonahan:fix-css-variables-in-mixins

Conversation

@kmonahan
Copy link
Copy Markdown

Fixes #78 . Allows for CSS variables to be set as the default value for a mixin or passed as a parameter.

Example:

@mixin set-color($color: var(--text-color)) {
  color: $color;
}

h3 {
  @include set-color;
}

h4 {
  @include set-color(var(--my-color));
}

Before, that resulted in:

h3 {
  color: va;
}

h4 {
  color: va;
}

After, that results in:

h3 {
  color: var(--text-color);
}

h4 {
  color: var(--my-color);
}


// match an opening parenthesis
const matchOpeningParen = '(';
const matchOpeningParen = /(?<!var)\(/;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you add some unit tests for this?

@paulAtSlim
Copy link
Copy Markdown

Could someone with propper skills please add the unit tests? :) This would be so great to see this being merged. 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mixins: CSS variables break when passed to mixin

3 participants