HTML - SCSS - ネストされたルールの後 & {}


 クラウディア


1. 概要
2. 警告
3. 対処

1. 概要

 2025年8月1日、前ページに続いて・・・。

2. 警告

 こんな「Warning」が出力されます。

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
    ╷
140 |	tab-size: 4;
    |^...........^
    ╵
filename.scss:140:1
THIS IS DEPRECATED AND WILL BE REMOVED IN SASS 2.0
 「Google」大先生に訳してもらいますと。
ネストされたルールの後に記述された宣言に対する Sass の動作は、次期バージョンで CSS で指定された動作に合わせて変更されます。既存の動作を維持するには、宣言をネストされたルールの上に移動します。新しい動作を有効にするには、宣言を `& {}` で囲みます。

詳細: https://sass-lang.com/d/mixed-decls
╷
140 | tab-size: 4;
|^...........^
╵
filename.scss:140:1
これは非推奨であり、SASS 2.0 で削除されます。
 だそうであります。

3. 対処

 該当箇所を抜き出してみますと。

body
{
	width: 100%;
	font-size: $default_font_size;

	@media (max-width: 1024px)
	{
		font-size:	1em;
	}

	tab-size: 4;
 となっております。  これの解消方法は、2つありまして。  該当の。

	tab-size: 4;
 の記述を。

	@media (max-width: 1024px)
 の上に持っていくか。

	& { tab-size: 4; }
 のように「& { }」で囲むんだそうであります。  前後関係に問題がなければ、移動させちゃう方が、手っ取り早いかと思います。

audiobook.jp
AbemaTV 無料体験
ネットオークションの相場、統計、価格比較といえばオークファン
葬送のフリーレン Prime Video
TikTok Shop 【リピート用プログラム】
5G CONNECT
earthcar(アースカー)
【usus ウズウズ】
サウンドハウス
U-NEXT
アフィリエイトのアクセストレード
EaseUS
ベルリッツ
Amazonギフトカード
ハイスピードプラン
JETBOY
薬屋の独り言
損保との違い
健康サポート特集
EMEET 1
それがだいじWi-Fi