Sass announced there will be some upcoming breaking changes to the syntax in mixed declarations. As of Sass 1.77.7 I'm getting the following warnings when compiling. -
Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in
& {}
.
Below is a basic example of the issue. If we define a mixin and then add it to a style class at the top of the class then declare other rules we will receive the above warning in the console.
@mixin border($color) {
border: 1px solid $color;
}
.style-with-mixin {
@include border(red);
padding: 20px;
// ...Any other styles
}
To remove this error we either have to wrap styles like the following -
.style-with-mixin {
@include border(red);
&{
padding: 20px;
// ...Any other styles
}
}
Or shift the mixin to be the last style declaration (this also blocks the possibility of overriding any of the mixin styles) -
.style-with-mixin {
padding: 20px;
// ...Any other styles
@include border(red);
}
However, both of these solutions involve a lot of rewriting of styles for whole projects which isn't going to be a realistic in my case. Other than locking the sass version has anyone been able to find a work around that can be implemented efficiently in exisiting projects?
Sass has a NPM Package available to help with migration: sass-migrator.
I recently used it on a large codebase and while it didn't do the complete migration, it did a big part of it.
You have here the link to the npm package and you can install it with npm i --save-dev sass-migrator
.
Once you install it run sass-migrator <migration> <entrypoint.scss...>
on the CLI.
According to the documentation:
The Sass migrator automatically updates your Sass files to help you move on to the latest and greatest version of the language. Each of its commands migrates a single feature, to give you as much control as possible over what you update and when.
This option (abbreviated -d) tells the migrator to change not just the stylesheets that are explicitly passed on the command line, but also any stylesheets that they depend on using the @use rule, @forward rule, or @import rule.
This option (abbreviated -I) tells the migrator a load path where it should look for stylesheets. It can be passed multiple times to provide multiple load paths.