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;



　となっております。
　これの解消方法は、２つありまして。
　該当の。



	tab-size: 4;



　の記述を。



	@media (max-width: 1024px)



　の上に持っていくか。



	& { tab-size: 4; }



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





AbemaTV　無料体験