-
-
Notifications
You must be signed in to change notification settings - Fork 935
New issue
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 ourterms of serviceand privacy statement.We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
no-duplicate-selectors
Sass mixed declarations deprecation
#7893
Comments
related:#7873 |
Hi@portikM, Out of curiosity, can you give a real world example where you really need/want declarations after nested rules? So you really need this: .example{
color:red;
a{
font-weight:bold;
}
font-weight:normal;
} But can't rewrite to: .example{
color:red;
font-weight:normal;
a{
font-weight:bold;
}
} The CSSWG thoroughly checked this to make sure it wouldn't cause issues on existing sites and found that in practice CSS authors didn't write declarations after rules in a way that actually affected the outcome. As is also the case in your example. I am not sure why Sass is giving the guidance to use |
The screenshots I attached is actually a real world use-case for this. 100% of impacted lines I've fixed over past couple days since we started using Sass 1.77.7 were declarations that follow one or more mixins. Often times we'll have some generic mixin that comes with nested rules and then we'll want to override/extend that mixin with some specific to use-case declarations. High-level example: @mixingenericButtonMixin{
background-color:transparent;
.icon{
stroke:currentColor;
}
}
button.primary{
@includegenericButtonMixin;
background-color:blue;
color:red;
} |
There's also a case for automatic migration tools on big codebases to avoid introducing regressions. |
Ah, yes, with mixins you can write an I get that Sass wants to provide a way for CSS authors to opt-in to the standard CSS mechanics today and that writing But eventually Sass will update and work like native CSS for all nested delcarations and you will no longer need to write So if we add a plugin option to help Sass authors it will only be briefly useful. Is there a wider use case for ignoring Have there been requests to ignore specific selectors or patterns for this rule? I couldn't spot any. Is it better to use configuration comments to disable this rule in very specific cases? |
related:#2198 (comment),#2199 |
I agree with@romainmenke.If this pattern helps only developers using Sass, it would be against our rule criteria: stylelint/docs/developer-guide/rules.md Line 14 in 1232b53
Also, this issue is related tostylelint-scss/stylelint-scss#1020.The stylelint-scss repo seems more suited for this discussion. |
How do I solve this: @mixincol-2($defaultSpan:1) {
@includegrid-layout();
grid-template-columns:repeat(auto-fit,minmax(40%,0.5fr));
>*{
grid-column:span$defaultSpan;
@includebreakpoints.tablet() {
grid-column:span1;
}
}
.half-width{
grid-column:span1;
}
.full-width{
grid-column:span2;
}
@includebreakpoints.mobile() {
grid-template-columns:1fr;
.full-width{
grid-column:span1;
}
}
@includebrowserhacks.ie_only{
.half-width{
width:50%;
}
.full-width{
width:100%;
}
}
}
|
What is the problem you're trying to solve?
Starting from version 1.77.7 Sass isdeprecating support for mixed declarations.Fixing and addressing warnings produced by Sass requires wrapping nested declarations in
& {}
:Old way
New way
In this case Stylelint considers the
& {}
to be a duplicate selector (expected behaviour). For now I disable theno-duplicate-selectors
rule for next line whenever I need to use the above selector, but I would like to discuss a more sophisticated solution.What solution would you like to see?
allowMixedDecls
secondary option inno-duplicate-selectors
rule (or something similar) that would allow the nested& {}
selector.The text was updated successfully, but these errors were encountered: