SASS 重大变更：混合声明

Question

当我运行 SASS 从 .scss 文件创建 .css 时，我会收到弃用警告。

我查了SASS的纪录片：https://sass-lang.com/d/mixed-decls

但是我不明白如何摆脱警告。

警告我的示例：警告屏幕截图

这个 css 选择器需要做什么（即）：

.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);
        }        
    }
}

Answer 1

目前，您的 _impressum-modal.scss 看起来像这样：

.your-class {
  prop_1: val_1;
  /* ... */
  prop_n: val_n;

  &:target {
    /* ... */
  }

  align-item: center;

  /* other nested blocks here */
}

基本上，您所要做的就是将所有样式属性移至所有嵌套样式块上方以保留以前的行为，如下所示：

.your-class {
  prop_1: val_1;
  /* ... */
  prop_n: val_n;

  align-item: center; /* before all nested blocks */

  &:target {
    /* ... */
  }

  /* other nested blocks here */
}

这会导致 _impressum-modal.css （就像现在一样）：

.your-class {
  prop_1: val_1;
  /* ... */
  prop_n: val_n;

  align-item: center; /* before all nested blocks */
}
.your-class:target {
  /* ... */
}
/* other nested blocks here */

但是如果一切保持不变（不移动align-item），那么将在新版本中创建一个单独的结构：

.your-class {
  prop_1: val_1;
  /* ... */
  prop_n: val_n;
}
.your-class:target {
  /* ... */
}
.your-class {
  align-item: center;
}
/* other nested blocks here */

如果您对这种分离感到满意并且只想删除警告，则可以简单地将属性包装在

& {}

中的嵌套块之间，如下所示：

.your-class {
  prop_1: val_1;
  /* ... */
  prop_n: val_n;

  &:target {
    /* ... */
  }

  & {
    align-item: center;
  }

  /* other nested blocks here */
}