We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I have tried many times to resolve code like this below correctly,
.component { $c: &; padding: 2vw; &__card { background-color: #fff; &:hover #{$c}__name { color: #bada55; } } &__name { color: #000; } &__button { background-color: blue; color: #fff; } }
But, it never works well, precss 2.0.0 would throw an error:
ERROR in ./node_modules/css-loader?{"importLoaders":1}!./node_modules/postcss-loader/lib!./src/style.css Module build failed: Unknown word (7:28) 5 | background-color: #FFF; 6 | } > 7 | .component__card:hover #{.component__card}__name | ^ 8 | color: #BADA55; 9 | } 10 | .component__name {
Then I tried upgrade precss 3.1.0, it works, but not well.
Which I expect result should be like this:
.component { padding: 2vw; } .component__card { background-color: #fff; } .component__card:hover .component__name { color: #bada55; } .component__name { color: #000; } .component__button { background-color: blue; color: #fff; }
You can also try that sass code compile online http://sass.js.org/.
But truely result is below:
.component { padding: 2vw; } .component__card { background-color: #fff; } .component__card:hover .component__card__name { color: #bada55; } .component__name { color: #000; } .component__button { background-color: blue; color: #fff; }
Is it a bug? And how to solute the problem?
The text was updated successfully, but these errors were encountered:
@whidy while there is no fix for this bug, you can try to set the variable's value to a component selector like:
.component { $c: .component; &__card { &:hover $(c)__name { ... } } }
or
$c: .component; $(c) { &__card { &:hover $(c)__name { ... } } }
Sorry, something went wrong.
To quote the postcss advanced variables readme:
postcss advanced variables
*Note: To use #{$var-name} without issues, you will need to include the PostCSS SCSS Syntax.
Meaning you will have to add PostCSS SCSS Syntax to your pipeline for this to work properly.
If your issue persists it likely belongs to postcss-advanced-variables or /postcss-scss instead. :)
No branches or pull requests
I have tried many times to resolve code like this below correctly,
But, it never works well, precss 2.0.0 would throw an error:
Then I tried upgrade precss 3.1.0, it works, but not well.
Which I expect result should be like this:
You can also try that sass code compile online http://sass.js.org/.
But truely result is below:
Is it a bug? And how to solute the problem?
The text was updated successfully, but these errors were encountered: