開発

bootstrapでカスタムカラー配列を作成して不要な多色コンポーネントを削除する方法

作成日： 2018年12月22日

📝 はじめに本記事はBootstrapのCSS容量削減についての一考です。

先日は、bootstrapのテーマカラーから、不要なカラーパターンをmap-removeを使用して削除する方法を紹介しました。

📝 以前書いた記事

bootstrapのテーマカラーを削減する方法

2018年12月21日

bootstrapは多くの便利なスタイルが格納されているフレームワークですが、一方で使用しないスタイルも多く、容量が大きいのが難点です。例えばテーマカラーだけでも、 Primary Secondary Success ...

しかし、アラートや文字色に関しては、やはり色数が欲しい。でも、テーブルやボタンには色数は不要だ、という具合に各コンポーネントによって色数を調整したい場合があります。

その場合は、

SASS _variables.scss

$point-colors: () !default;
$point-colors: map-merge(
	(
		"primary":    $primary,
		"secondary":  $secondary,
		"light":      $light,
		"dark":       $dark,
	),
	$point-colors
);

$btn-colors: () !default;
$btn-colors: map-merge(
	(
		"primary":    $primary,
		"secondary":  $secondary,
		"success":    $success,
		"warning":    $warning,
	),
	$btn-colors
);

のように、テーマカラーとは異なるカラー配列を作成して、例えばアラートの色を$point-colors配列を使用する場合は、_alert.scssの

SASS _alert.scss

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  }
}

を

SASS _alert.scss

@each $color, $value in $point-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  }
}

のように@eachで取得する配列を$theme-colorsから$point-colorsに変更します。

その他のコンポーネントも各scssファイルの$theme-colorsの配列を変更すれば色数を調整することが可能です。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

2,138 円～ 2023年3月20日 8:18 PM時点のAmazon.co.jp 価格 -詳細はこちら-価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点でAmazon.co.jpに表示されている価格および発送可能時期の情報が適用されます。

CSSをより便利に、効率的に書ける「Sass（サス）」の解説書を、最新のコーディング環境にあわせて大幅刷新！Sassは導入が面倒そう。はじめたいけどあと一歩が踏み出せない。CSSを今よりも効率的に書きたい。こうした方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。CSSをHTMLの構造に合わせて入れ子で書いていく「ネスト」や、便利な「変数」や「演算」などのSassの基本機能はもちろん、筆者が実際に仕事の現場で使っている実践的なテクニックまで、この一冊で網羅しています。

amazonでチェック

本サイト上で表示されるコンテンツの一部は、アマゾンジャパン合同会社またはその関連会社により提供されたものです。これらのコンテンツは「現状有姿」で提供されており、随時変更または削除される場合があります。