AngularグローバルSCSS変数共有設定
AngularプロジェクトでグローバルなSCSS変数を定義し、各コンポーネントで個別にインポートすることなく利用する方法について説明します。
手順
-
グローバル変数ファイルの作成
src/stylesディレクトリ内に_variables.scssというファイルを作成します。- このファイルにグローバルに使用したい変数を定義します。
// _variables.scss $primary-color: #336699; $secondary-color: #ff6600; -
Angular CLIの設定
angular.jsonファイルを開き、styles配列にグローバル変数ファイルのパスを追加します。
"styles": [ "src/styles.scss", "src/styles/_variables.scss" ] -
コンポーネントでの使用
- 各コンポーネントのSCSSファイルで、直接変数名を使用してアクセスできます。インポートは不要です。
// component.scss .my-component { color: $primary-color; background-color: $secondary-color; }
なぜこの方法が便利か
- 一貫性のあるデザイン
グローバル変数を使用することで、プロジェクト全体で統一されたデザインを保つことができます。 - メンテナンスの容易さ
グローバル変数を一箇所で管理することで、テーマやスタイルの変更が容易になります。 - コードの重複を減らす
グローバル変数を各コンポーネントでインポートする必要がなくなります。
- より複雑なテーマ管理やスタイルのカスタマイズが必要な場合は、CSS変数やテーマモジュールなどの手法も検討できます。
- グローバル変数ファイルは、通常、プロジェクトのテーマやスタイルガイドを定義するために使用されます。
グローバルSCSS変数の定義
まず、グローバルなSCSS変数を定義するファイルを作成します。通常、src/styles ディレクトリ内に _variables.scss という名前で作成します。
// _variables.scss
$primary-color: #336699;
$secondary-color: #ff6600;
$font-family: Arial, sans-serif;
次に、Angular CLIの設定ファイル angular.json を編集して、グローバル変数ファイルを読み込むようにします。
"styles": [
"src/styles.scss",
"src/styles/_variables.scss"
]
// component.scss
.my-component {
color: $primary-color;
background-color: $secondary-color;
font-family: $font-family;
}
例：Angular Materialのテーマのカスタマイズ
Angular Materialのテーマをカスタマイズする場合も、グローバルSCSS変数を利用できます。
テーマファイルの作成
// _theme.scss
@import '~@angular/material/theming';
// Custom theme
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink);
@include mat-core();
$theme: mat-light-theme((
color: (
primary: $app-primary,
accent: $app-accent,
)
));
@include angular-material-theme($theme);
グローバル変数ファイルの更新
グローバル変数ファイルに、テーマのカスタマイズに必要な変数を追加します。
// _variables.scss
// ... other variables
$mat-primary: mat-palette($mat-indigo);
$mat-accent: mat-palette($mat-pink);
コンポーネントのSCSSファイルで、テーマ変数を使用してスタイルを適用します。
// component.scss
.my-component {
color: mat-color($mat-primary);
background-color: mat-color($mat-accent);
}
- グローバル変数の命名規則を統一することで、コードの可読性を向上させることができます。
AngularプロジェクトでグローバルSCSS変数を共有する方法は、先述の方法以外にもいくつかあります。以下に、その代替手法をいくつか紹介します。
CSS変数（カスタムプロパティ）
CSS変数を使用することで、グローバルなスタイルを定義し、コンポーネント内で直接参照することができます。
グローバルスタイルファイル（global.scss）
:root {
--primary-color: #336699;
--secondary-color: #ff6600;
}
コンポーネントのSCSSファイル
.my-component {
color: var(--primary-color);
background-color: var(--secondary-color);
}
テーマモジュール
Angular Materialのテーマモジュールのように、カスタムテーマモジュールを作成することで、グローバルなテーマ設定を管理することができます。
@NgModule({
imports: [
MatCardModule,
MatToolbarModule,
// ... other modules
],
exports: [
MatCardModule,
MatToolbarModule,
// ... other modules
],
providers: [
{ provide: MAT_THEME, useValue: { primary: 'primary', accent: 'accent' } }
]
})
export class MyThemeModule {}
@use '@angular/material' as mat;
.my-component {
color: mat.color($mat-primary);
background-color: mat.color($mat-accent);
}
SCSS Mixin
SCSS Mixinを使用して、共通のスタイルを定義し、コンポーネント内で再利用することができます。
@mixin primary-color {
color: $primary-color;
}
@mixin secondary-background {
background-color: $secondary-color;
}
.my-component {
@include primary-color;
@include secondary-background;
}
選択する手法のポイント
- スタイルの再利用
SCSS Mixinは、共通のスタイルを再利用するのに便利です。 - テーマ管理
テーマモジュールは、Angular Materialのテーマシステムと同様に、テーマのカスタマイズを効率的に行うことができます。 - シンプルさ
CSS変数はシンプルで使いやすいですが、複雑なテーマのカスタマイズには適さない場合があります。
css angular sass
