Bootstrap v4でSassをコントロールする方法

新しもの好きな私は独断で案件にBootstrap4を使っています。
var.α6扱っている最中に4に切り替わったときは焦った…。あんまり保守入らない案件でよかった。。。（典型的な独りよがりオシャンティコーダーで反省しております。）
今回はそんなBootstrap4をSassでコントロールするお話です。

Bootstrap3時代はLESSと言うものを使っていたらしいんですが、自分はなるべく知識を覚えたくない人間なので、触ったこともありませんでしたがv4からはSassが扱える様です。v3は地味にCSSのみ使ってました。

スポンサードリンク

Download · Bootstrap
上のリンクからSASS一式をダウンロードします。

すごい量のファイルがありますが、様々な要素がコンポーネント化され、細分化されているのですね。

ひとまず、自分の作っている@importを書きまくっているファイルに以下を書き込むとBootstrapが全て起動します。

@import "bootstrap_v4/bootstrap.scss";

1	@import "bootstrap_v4/bootstrap.scss";

リセットだけ使いたいとか、グリッド・システムだけ使いたい方は

@import "bootstrap_v4/bootstrap-grid.scss";
@import "bootstrap_v4/bootstrap-reboot.scss";

1 2	@import "bootstrap_v4/bootstrap-grid.scss"; @import "bootstrap_v4/bootstrap-reboot.scss";

だけを書き込むと軽くていいでしょう。(bootstrap.scssは上記を含みます。)

_variables.scss

_variables.scssはBootstrapカスタマイズの重要なファイルです。

$white:  #fff !default;
$black:  #000 !default;
$red:    #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green:  #5cb85c !default;
$blue:   #0275d8 !default;
$teal:   #5bc0de !default;
$pink:   #ff5b77 !default;
$purple: #613d7c !default;
// Create grayscale
$gray-dark:                 #292b2c !default;
$gray:                      #464a4c !default;
$gray-light:                #636c72 !default;
$gray-lighter:              #eceeef !default;
$gray-lightest:             #f7f7f9 !default;
// Reassign color vars to semantic color scheme
$brand-primary:             $blue !default;
$brand-success:             $green !default;
$brand-info:                $teal !default;
$brand-warning:             $orange !default;
$brand-danger:              $red !default;
$brand-inverse:             $gray-dark !default;

$white: #fff !default;

$black: #000 !default;

$red: #d9534f !default;

$orange: #f0ad4e !default;

$yellow: #ffd500 !default;

$green: #5cb85c !default;

$blue: #0275d8 !default;

$teal: #5bc0de !default;

$pink: #ff5b77 !default;

$purple: #613d7c !default;

// Create grayscale

$gray-dark: #292b2c !default;

$gray: #464a4c !default;

$gray-light: #636c72 !default;

$gray-lighter: #eceeef !default;

$gray-lightest: #f7f7f9 !default;

// Reassign color vars to semantic color scheme

$brand-primary: $blue !default;

$brand-success: $green !default;

$brand-info: $teal !default;

$brand-warning: $orange !default;

$brand-danger: $red !default;

$brand-inverse: $gray-dark !default;

こんな感じで定義されているので、自分の好きな色を入れておくといいでしょう。

この他にもたくさん定義があるのでカスタマイズしたい方は以下を参照するといいでしょう。

テーマ～Bootstrap4移行ガイド