When I run SASS to create a .css from a .scss file then I get a Deprecation Warning.
I looked up the documentary from SASS: https://sass-lang.com/d/mixed-decls
However I do not understand how I get rid of the warnings.
Warning to my example: screenshot of warning
What needs to be done with this css selector (i.e):
<code>.booking-modal {
display: none;
justify-content: center;
align-items: center;
position: fixed; /*Booking-modal ist über der gesamten Seite*/
z-index: 20000;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
&:target {
display: flex;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-name: booking-modal--fade-in;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: 1;
background-color: rgba(0, 0, 0, 0.85);
@supports(backdrop-filter: blur(4rem)) {
background-color: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4rem);
}
}
}
</code>
<code>.booking-modal {
display: none;
justify-content: center;
align-items: center;
position: fixed; /*Booking-modal ist über der gesamten Seite*/
z-index: 20000;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
&:target {
display: flex;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-name: booking-modal--fade-in;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: 1;
background-color: rgba(0, 0, 0, 0.85);
@supports(backdrop-filter: blur(4rem)) {
background-color: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4rem);
}
}
}
</code>
.booking-modal {
display: none;
justify-content: center;
align-items: center;
position: fixed; /*Booking-modal ist über der gesamten Seite*/
z-index: 20000;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
&:target {
display: flex;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-name: booking-modal--fade-in;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: 1;
background-color: rgba(0, 0, 0, 0.85);
@supports(backdrop-filter: blur(4rem)) {
background-color: rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4rem);
}
}
}
1
Currently, your _impressum-modal.scss looks like this:
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
&:target {
/* ... */
}
align-item: center;
/* other nested blocks here */
}
</code>
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
&:target {
/* ... */
}
align-item: center;
/* other nested blocks here */
}
</code>
.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
&:target {
/* ... */
}
align-item: center;
/* other nested blocks here */
}
Basically, all you have to do is move all the style properties above all the nested style blocks to preserve the previous behavior, like this:
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
align-item: center; /* before all nested blocks */
&:target {
/* ... */
}
/* other nested blocks here */
}
</code>
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
align-item: center; /* before all nested blocks */
&:target {
/* ... */
}
/* other nested blocks here */
}
</code>
.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
align-item: center; /* before all nested blocks */
&:target {
/* ... */
}
/* other nested blocks here */
}
It would result _impressum-modal.css (like now):
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
align-item: center; /* before all nested blocks */
}
.your-class:target {
/* ... */
}
/* other nested blocks here */
</code>
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
align-item: center; /* before all nested blocks */
}
.your-class:target {
/* ... */
}
/* other nested blocks here */
</code>
.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
align-item: center; /* before all nested blocks */
}
.your-class:target {
/* ... */
}
/* other nested blocks here */
But if everything remains unchanged (without moving align-item), then a separate structure will be created in the new versions:
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
}
.your-class:target {
/* ... */
}
.your-class {
align-item: center;
}
/* other nested blocks here */
</code>
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
}
.your-class:target {
/* ... */
}
.your-class {
align-item: center;
}
/* other nested blocks here */
</code>
.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
}
.your-class:target {
/* ... */
}
.your-class {
align-item: center;
}
/* other nested blocks here */
If you happy with this separation and you just want to remove the warning, you can simply wrap the properties between nested blocks in & {}, like this:
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
&:target {
/* ... */
}
& {
align-item: center;
}
/* other nested blocks here */
}
</code>
<code>.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
&:target {
/* ... */
}
& {
align-item: center;
}
/* other nested blocks here */
}
</code>
.your-class {
prop_1: val_1;
/* ... */
prop_n: val_n;
&:target {
/* ... */
}
& {
align-item: center;
}
/* other nested blocks here */
}
New contributor
setday is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.