あくまで自分用の覚え書きなので文章とか適当です...

割り算

//今まで
foo/bar

//Dart Sass
@use 'sass:math';

math.div(foo, bar);

Mixinや関数はglobalフォルダにまとめておく

global/_index.scss で global のファイルを @forward でまとめて読み込んでおく

@forward './mixins';
@forward './functions';
@forward './variables';

必要に応じてglobal内でも必要なファイルを読み込む

_mixin.scss

@use '../global/variables' as *;

@import → @useに書き換え

@use 'layout/header';
@use 'layout/footer';
@use 'layout/container';
@use 'layout/sidebar';
...

各ファイルの冒頭で global ファイルを読み込んでおく

ネスト内で別ファイルを読み込む

@use 'sass:meta';

.entry-content {
    @include meta.load-css('gutenberg/blocks/block-heading');
    @include meta.load-css('gutenberg/blocks/block-list');
}

参考リンク

リンク

https://lunalunadesign.net/2022/09/2895/#WordPress_Sass_import

https://zenn.dev/kagan/articles/1aa466bb6ef8eb

スポンサーリンク