Bootstrapの変数を自分のSCSS(SASS)で使う方法

Bootstrapの変数を自分のSCSS(SASS)で使う方法



bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。

通常、bootstrapの色や幅などの数値を変更するにはその中にある

_variables.scss

の中の変数を変更して、

bootstrap.scss

をコンパイルすれば新しく

bootstrap.css

が生成されます。

のですが、WordPressのテーマをbootstrapベースで開発している際に、テーマ用の

style.css

の中で、bootstrapで設定している変数を使用したくなります。

そこで、

style.scss

を作成して、

@import 'includes/scss/bootstrap/variables';
.post-title{
	border-left: 10px $primary solid;
}

と書いてコンパイルすると・・・

Compilation Error<br>
Error: argument `$color` of `darken($color, $amount)` must be a color

エラーが発生します。(visual studio code)

どうやら$colorの変数が取得出来なくてエラーを起こしている様子。

よくよく調べてみると、bootstrapはscss内で使う関数を

_functions.scss

で定義しているため、このファイルもインポートする必要があります。

@import 'includes/scss/bootstrap/functions';
@import 'includes/scss/bootstrap/variables';
.post-title{
	border-left: 10px $primary solid;
}

これでstyle.cssファイルに

.post-title {
  border-left: 10px #007bff solid;
}

が生成されました。

_functions.scss大事です。

今日はここまで
Bootstrapの変数を自分のSCSS(SASS)で使う方法

Bootstrapの変数を自分のSCSS(SASS)で使う方法


開発

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…


関連する記事



こちらはいかが?


コメントを残す