2年の間ほぼ毎日SCSSを書いていたので、備忘録みたいな感じで自分なりのSCSSを書いておきます。
使用する想定はWordPressの場合です。

必要ファイル

_reset.scss
_variables.scss
_mixin.scss
_base.scss
common.scss

最低限用意するファイルは上記の通りです。

_reset.scss

_reset.scssにはリセット用のcssを書いておきます。好みで好きなものを使えばいいと思いますが、自分は『destyle.css』を使用しています。
destyle.cssを使用している理由はほかのものにする理由がないので特に拘りとかではありません。

_variables.scss

_variables.scssは変数を入れておくためのパーシャルファイルです。

_variables.scss

$color1: #0E185F;
$color2: #2FA4FF;
$color3: #00FFDD;
$color4: #E8FFC2;
$color5: #ffffff;

// google fonts import
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

.libre {
    font-family: "Libre Baskerville", serif;
}
.noto {
    font-family: "Noto Sans JP", sans-serif;
}
.lato {
    font-family: "Lato", sans-serif;
}

//break point
$break-point_xl: 1200px;
$break-point_lg: 1024px;
$break-point-md: 768px;
$break-point-sp: 540px;
$break-point-xs: 375px;


$page-width: 1200px;

仕事でSCSSをたくさん書いて、あれこれ変数ファイルを触りましたがあまり使わないものを定期的に削除した結果非常に少なくなりました。

$color1: #0E185F;
$color2: #2FA4FF;
$color3: #00FFDD;
$color4: #E8FFC2;
$color5: #ffffff;

色は案件にもよりますが、デザイナーさんとXD内での管理のしやすさなどを考え1つのサイトで5色ぐらい以内にしてもらっているので、毎回このぐらいしかありません。
他の方の色変数を見ると変数名を『primary』などのbootstrapっぽいものや、『blue』などの色そのものを変数名にしている人もいますが、毎回書いている途中で忘れてしまうのと、VSCODEで色見本がでるのでわかりやすい名前に落ち着きました。異論は認めます。
mapを使用する方もいますが、作業効率を考えると使用しないことが多いです。

// google fonts import
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

.libre {
    font-family: "Libre Baskerville", serif;
}
.noto {
    font-family: "Noto Sans JP", sans-serif;
}
.lato {
    font-family: "Lato", sans-serif;
}

adobefontsを使用することもありますが、基本的にhtmlのheaderが汚れるのが嫌なのでローカルに落とすにしろscss内にリンクを書きます。
自分だけのあるあるかもしれないですが、使用するフォントのfont-familyを忘れてしまいgoogle fontsを開いて確認するということが多かったので、family名でクラス化してしまいます。
使用したいときに@extendで呼び出せるので便利です。

//break point
$break-point_xl: 1200px;
$break-point_lg: 1024px;
$break-point-md: 768px;
$break-point-sp: 540px;
$break-point-xs: 375px;

$page-width: 1200px;

ブレイクポイントはほぼすべての案件でこのサイズを使用しています。デザイナーさんには基本的にPC用のカンプしか用意してもらっていないので、上記のブレイクポイントでそれっぽくレスポンシブを記述します。
$page-widthはコンテナ幅なので案件によって変更します。

_mixin.scss

_mixin.scss

//media query
@mixin xl {
	@media screen and (max-width: $break-point_xl) {
		@content;
	}
}

@mixin lg {
	@media screen and (max-width: $break-point_lg) {
		@content;
	}
}

@mixin md {
	@media screen and (max-width: $break-point-md) {
		@content;
	}
}

@mixin sm {
	@media screen and (max-width: $break-point-md - 1) {
		@content;
	}
}

@mixin sp {
	@media screen and (max-width: $break-point_sp) {
		@content;
	}
}

@mixin xs {
	@media screen and (max-width: $break-point_xs) {
		@content;
	}
}

// ----
// * ex)
//   @include media-max(横幅) {}
//   @include media-min(横幅) {}
// ----
@mixin media-max($width) {
	@media screen and (max-width: $width) {
		@content;
	}
}

@mixin media-min($width) {
	@media screen and (min-width: $width) {
		@content;
	}
}

昔どこかのサイトで見たメディアクエリを効率よく書くmixinをそのまま使用しています。
flexをまとめて書くmixinなど用意したことありますが、メディアクエリ以外は保守をする際mixinの仕様を忘れてしまうなどが多かったので使わなくりました。
毎回同じようなデザインならmixinを豊富にしてもよいと思いますが、案件度にデザインが違いすぎる場合はmixinを書いている時間がもったいないので使うのはこれだけです。
疑似要素で三角形を作る際毎回ジェネレーターサイトを開いているので、それぐらいはmixin化したいです。

_base.scss

_base.scss

html {
    font-size: 10px !important;
}
body {
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: 0.13em;
    background-color: $color5;
    color: $color1;
    @extend .noto;
}
.sp {
    display: none;
    @include sp {
        display: block;
    }
}

.pc {
    display: block;
    @include sp {
        display: none;
    }
}
.page-width {
    width: 100%;
    max-width: $page-width;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    margin: 0 auto;
    &.narrow {
        max-width: calc($page-width - 320px);
    }
    &.wide {
        max-width: 100%;
    }
}

_base.scssには案件で使用する基本的なスタイルをまとめて書いておきます。上記に書いてあるのは案件で毎回書くスタイルです。
remを使用するのはユーザー思いではないとか巷で議論されていますが、クライアントのデバイス設定は確認する際邪魔でしかないのでimportantは必須にしています。

『.sp』、『.pc』は使用頻度は低いですが、ちょっとした表示・非表示のためだけにcssを書くのを避けるため用意しています。レスポンシブで画像が変わる場合などに重宝します。

『.page-width』はコンテナ幅の設定で、小さいサイズとフルサイズも用意します。どれにも当てはまらない場合は別でcssを上書きしますのでここには記述しないです。

ここには他にa,ul,li,tableなど基本的なスタイルを書いていきますが、他のパーシャルファイルで上書きしやすいようにクラス指定はなるべく少なくします。

common.scss

common.scss

@import "reset";
@import "variables";
@import "mixin";
@import "base";

当たり前のことですが、上記の順番です。common.scssにはインポート以外書かないようにしています。
働き始めてscssの勉強のためbootstrapのscssを見ていた時、bootstrapのcommonにインポートしか書かれていなかったので真似しただけです。
ですが、管理しやすいのでお勧めです。

その他のパーシャルファイル

その他のパーシャルファイルは案件によって変わってしまいますが、ルールを決めて作成しています。
下記はWordPress案件の一例の一部です。

@import "reset";
@import "variables";
@import "mixin";
@import "base";
@import "header";
@import "footer";
@import "mainvisual";
@import "front-page";
@import "archive";
@import "single-page";
@import "page";
@import "front-page";
@import "page-about";
@import "post";

①テンプレート毎にパーシャルファイルを用意

複数人で進めるときにこのルールがあるととても便利です。一人でやっていても修正の際すぐに修正箇所が見つかるのでこのルールでファイルを作成しています。
ただ、メインビジュアルやヘッダー、フッターなど記述量が多くなったり、ほかのページで共通で使用されるものはパーシャルファイルを作成します。

②パーシャルファイル同士を依存させない

_header.scss

$text-size: 18px;
.cstm-text {
    font-size: $text-size;
    padding: 1em 3em;
}

_page-about.scss

.flavor-text {
    @extend .cstm-text;
}

上記は最悪な例です。variablesやmixin,baseなどを除いてパーシャルファイルが他のパーシャルファイルに依存していると保守性、可読性が悪いので自分は絶対に行いません。パーシャルファイルは単独でも動くコードが望ましいです。
自分は効率のためテンプレート毎にパーシャルファイルを作成しますが、時間があるのならbootstrapのようにコンポーネント別が本来望ましいと思います。

③思いやりのあるコード

最後はどうでもよいですが、自己満で書いたmixinや過度に凝ったbemでの記述は『頑張った』という悦に浸れるだけのコードで一緒に作業する人は苦痛に感じる場合があるので、シンプルで無駄がなく、機能的に優れたコードを書くことが大事だと思います。

まとめ

上記はあくまでも自分が仕事をする上でいらないものを削ったりした結果なのであくまでも参考程度で見てください。