SassのMixed Declarationsに対応する

Mixed Declarationsって何？

DartSassをアップデートしたら下記のエラーが表示されるようになりました。

Deprecation Warning: 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 `& {}`.

More info: https://sass-lang.com/d/mixed-decls

「ネストの後に宣言するな」 というルールです。
言葉で書いても良く分からないですね。

例えば下記のサンプルだと font-weight: normal; がネストの後にあるのでNGです。

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}

下記が修正版です。

.example {
  color: red;
  font-weight: normal;

  a {
    font-weight: bold;
  }
}

今まではSassが上記のように修正してくれました。

その後CSSワーキンググループの話し合いで 「書いた順番に適用するのが正しいよね」 という事になり、下記のように扱われることになりました。

.example {
  color: red;
}

.example a {
    font-weight: bold;
  }

.example {
  font-weight: normal;
}

じゃあ自動でやってくれよ！！！！
と思うのですが、そうはいかないようです。

面倒くさい！！！！

対応方法

対応方法①　 &{} で囲む

.example {
  color: red;

  a {
    font-weight: bold;
  }

  & {
    font-weight: normal;
  }
}

対応方法②　@include を分ける

ボタンの共通スタイルを例にします。
下記はNGの例です。

@mixin btn-common {
  display: block;
  width: fit-content;

  &[disabled='disabled']{
    cursor: not-allowed;
    pointer-events: none;    
  }
}

.btn{
  // disabled のブロックが間にあるのでNG
  @include btn-common;

  background-color: red;
  color: white;
}

下記が対応版です。
@mixin を分割しています。
くっそ面倒臭いですね。

@mixin btn-common {
  display: block;
  width: fit-content;
}

@mixin btn-disabled-common {
  &[disabled='disabled']{
    cursor: not-allowed;
    pointer-events: none;    
  }
}

.btn{
  @include btn-common;

  background-color: red;
  color: white;

  @include btn-disabled-common;
}

対応方法③　ブロック自体を分ける

自分はメディアクエリー毎のCSS変数を頭で定義することが多いのですが、それがNGになりました。

.btn{
  @media (PC用メディアクエリー) {
    --btn--font-size: 3rem;
  }
  @media (タブレット用メディアクエリー) {
    --btn--font-size: 2rem;
  }
  @media (スマホ用メディアクエリー) {
    --btn--font-size: 1rem;
  }

  font-size: var(--btn--font-size);
}

下記が対応版です。

// 変数定義用ブロック
.btn{
  @media (PC用メディアクエリー) {
    --btn--font-size: 3rem;
  }
  @media (タブレット用メディアクエリー) {
    --btn--font-size: 2rem;
  }
  @media (スマホ用メディアクエリー) {
    --btn--font-size: 1rem;
  }
}

// 実装用ブロック
.btn{
  font-size: var(--btn--font-size);
}

おわり

オプションで silenceDeprecations を指定すれば警告を消せるらしいのですが、 gulp-sass経由だとDartSassのオプションを指定できないらしく、警告を消せません。

な ん だ そ れ

対応できない場面も出てきそうで正直かなり面倒な気分です。
DartSassのバージョンを戻したいです。