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 の中…


関連する記事



こちらはいかが?


[WordPress] パーマリンクを自動翻訳してくれるプラグイン
[WordPress] パーマリンクを自動翻訳してくれるプラグイン

パーマリンクを英語にした方が、SEO的に良いよ、という事です。 であれば翻訳API使って、自動翻訳してくれるようにすれば良くないかい?と思い、調べてみたらGoogle翻訳APIを使って同様なことを実装しているという記事。…

WordPressのギャラリーデフォルト値を変更する方法
WordPressのギャラリーデフォルト値を変更する方法

WordPressのギャラリー設定のデフォルト値は、 のように、 リンク先:「添付ファイルのページ」 カラム:「3」 サイズ:「サムネイル」 のようになっています。 このデフォルト値を リンク先:「メディアファイル」 カ…

コメントを残す