何ヶ月か前に、魅力的なウェブサイトを構築するために、従来のCSSではなくSassを使用すべき理由を7つ挙げました。 これらの理由の 1 つは、世界で最も使用されているフロントエンド フレームワークである Bootstrap をカスタマイズする機能です。 このブログ記事では、Sass を使用して Bootstrap 4 を拡張し、ユニークで楽しいユーザー体験を提供するための基本的なコンセプトについて説明します。
Sass と Bootstrap 4 の設定
はじめに、Sass と最新の Bootstrap 4 をインストールしましょう。 Bootstrap の現在の最新バージョンは 4.2.1 です。 Bootstrap 4 のソースファイルが必要ですが、コンパイル済みの CSS/JS ファイルと混同しないようにしてください。 ファイルを解凍すると、scssディレクトリが見つかります。
scss フォルダーの中身は？
Bootstrap scss フォルダーには、一連の .scss ファイルと、その他の Sass コードのある mixins と utilities という 2 つのディレクトリーが含まれています。
my-web-project/ (root folder of your project)|-- scss/| |-- bootstrap/| | |-- mixins/| | | |-- | | |-- utilities/| | | |-- | | |-- _alert.scss| | |-- _badge.scss| | |-- _breadcrumb.scss | | |-- | | |-- _variables.scss| | |-- bootstrap-grid.scss| | |-- bootstrap-reboot.scss| | |-- bootstrap.scss
これらの .scss ファイルを CSS スタイルシートに変換するには、プロジェクトのルートから次のコマンドを実行することにより、bootstrap.scss を bootstrap.css にコンパイルするよう Sass に伝えます：
$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css
また、Scss ファイルが更新されるたびに CSS を自動コンパイルするため、–watch フラッグを追加することも可能です。
Note that:
- css is the folder containing the CSS file(s).
- 出力フォルダが存在しない場合、コンパイラーはあなたのためにそれを作成します。
- 何かがうまくいかない場合、コンパイラーは何が起こったかを表示します。 たとえば、このエラーは、参照される .scss ファイルがないことを知らせます。
Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet
カスタマイズ段階を開始する前に、Bootstrap Sass ソース ファイルに関して従うべきいくつかの重要な原則は次のとおりです。
独自のテーマファイルを追加する
ファイルを編集せずに Bootstrap をカスタマイズするには、どうすれば良いでしょうか。 まず、scss ディレクトリ内に独自の「theme」ディレクトリを作成します。 このフォルダーには、すべてのカスタム scss ファイルが含まれます。 次に、scss ディレクトリの下に空の main.scss ファイルを作成します。
Mugoでは、このように整理するために別のテーマフォルダを使用することを好んでいます：
my-web-project/ (root folder of your project)|-- scss/ (scss files)| |-- bootstrap/ (Bootstrap source files)| | |-- | |-- my-theme/ (your custom scss files)| | |-- my-theme.scss| | |-- | |-- bootstrap-overrides.scss| |-- main.scss
main.scss はその名の通り、プロジェクトのメインscss ファイルになります。
@import "bootstrap-overrides";@import "my-theme/my-theme";
bootstrap-overrides.scss はメインの bootstrap.scss ファイルと同様に動作します。
開始するには、bootstrap/bootstrap.scssのコピーとしてbootstrap-overrides.scssを作成しますが、scssディレクトリ構造をカスタマイズしたので、それぞれの@importステートメントのパスを更新することを忘れないでください。
/*!* Bootstrap v4.2.1 (https://getbootstrap.com/)* Copyright 2011-2018 The Bootstrap Authors* Copyright 2011-2018 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";@import "bootstrap/root";@import "bootstrap/reboot";
テーマの色を更新する
Bootstrapはフレームワークのカラーシステムを設定するために、たくさんの変数を使用します。 これらの変数はすべて _variables.scss にあります:
$blue: #007bff !default;$indigo: #6610f2 !default;$purple: #6f42c1 !default;$pink: #e83e8c !default;$red: #dc3545 !default;$orange: #fd7e14 !default;$yellow: #ffc107 !default;$green: #28a745 !default;$teal: #20c997 !default;$cyan: #17a2b8 !default;$primary: $blue !default;$secondary: $gray-600 !default;$success: $green !default;$info: $cyan !default;$warning: $yellow !default;$danger: $red !default;$light: $gray-100 !default;$dark: $gray-800 !default;
主なテーマ色 (青) を更新したいと仮定すると、それを bootstrap-overrides.scss ファイルに定義します。 この変数は、すべての @import ステートメントの前に配置する必要があります。
$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";
Sass コードをコンパイルすると、この新しい $primary color 値は $primary 変数を参照するすべてのコードで使用されます。
デフォルトブレークポイントの変更
Bootstrapブレークポイントも _variables.scss ファイルで定義されます。 以下はデフォルト値です。
$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);
既存のブレークポイントを更新したり、新しいブレークポイントを追加するには、必要なキーだけを渡して $grid-breakpoints 変数をオーバーライドする必要があります。
$grid-breakpoints: (sm: 500px,xxl: 1440px);
この例では、「sm」ブレークポイント値を (576px から) 500px に変更し、「xxl」という名前の新しいブレークポイントを追加しています。 デフォルト値は、
sm: 540px,md: 720px,lg: 960px,xl: 1140px
この例では、「sm」の値を更新して、新しい「xxl」ブレークポイント用に新しい値を追加する必要があります。
$container-max-widths: (sm: 480px,xxl: 1400px);
Customize the spacing rules
Bootstrap ヘルパー クラスのもう 1 つの素晴らしいセットは、スペーシング ルールに関連するものです。 デフォルト値は、$spacer と $spacers 変数によって管理されます。 デフォルト値を更新するには、bootstrap-overrides.scss ファイルで定義する必要があります。
$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));
Sass コードがコンパイルされると、次の CSS が生成されます：
.m-0 {margin: 0 !important;}.m-1 {margin: 0.5rem !important;}.m-2 {margin: 1rem !important;}.m-3 {margin: 1.5rem !important;}.m-4 {margin: 2rem !important;}.m-5 {margin: 3rem !important;}// new one.m-6 {margin: 5rem !important;}
Take advantage of some useful variables
Theme colors, breakpoints and spacing variables are just some of the most useful variables within the framework but there is much more. たとえば、丸みを帯びたボーダー スタイルが好きではないですか? グローバル変数 $enable-rounded を “false” に設定することで、簡単に丸みを帯びたボーダーを削除することができます。
以下は、コンパイルされた CSS にシンプルで強力な変更を加える、より便利な変数です:
$enable-caret: true !default;$enable-rounded: true !default;$enable-shadows: false !default;$enable-gradients: false !default;$enable-transitions: true !default;$enable-prefers-reduced-motion-media-query: true !default;$enable-grid-classes: true !default;$enable-print-styles: true !default;$enable-validation-icons: true !default;
- $enable-caret は、主にドロップダウン要素内に表示するキャレット アイコンを管理するために使用されます。 デフォルト値は true です。
- $enable-rounded は、要素の丸みを帯びたボーダーを管理するために使用されます。
- $enable-shadows は、ボタンやフォーム要素の box-shadow プロパティを制御するために使用されます。 3969>
- $enable-gradients は、さまざまなコンポーネントの background-image スタイルで定義済みのグラデーションを有効にします。9138>
Use only what you really need
そして、最後になりましたが、どの Bootstrap コンポーネントを含めるかを完全に制御するのはあなたです。 サイトで使用しない Bootstrap コンポーネントやユーティリティがある場合は、それらを除外して、コンパイルされた CSS ファイルをできるだけ軽くすることができます。
@import "bootstrap/pagination";// @import "bootstrap/badge";// @import "bootstrap/jumbotron";@import "bootstrap/alert";// @import "bootstrap/progress";@import "bootstrap/media";@import "bootstrap/list-group";@import "bootstrap/close";// @import "bootstrap/toasts";@import "bootstrap/modal";// @import "bootstrap/tooltip";@import "bootstrap/popover";@import "bootstrap/carousel";// @import "bootstrap/spinners";@import "bootstrap/utilities";
カスタマイズを完了したら、Sass コードをコンパイルして CSS ファイルを作成することを忘れないでください。
$ sass scss/main.scss:css/my-theme.css
あるいは、さらに良い方法は、–watch フラグを使用して、ファイルが更新されるたびに、Sass がバックグラウンドで scss ファイルをコンパイルするようにすることです：
$ sass --watch scss/main.scss:css/my-theme.css
次は何でしょうか。 あなたのサイトは、おそらく「Bootstrap サイト」として認識されることでしょう。 Mugoでは、デザイン仕様に沿って完全にユニークな外観のサイトを作り、快適なユーザー体験と高いパフォーマンスのサイトを提供します。 出発点は、上記の原則を用いた Bootstrap ですが、独自のカスタム要素をさらに分割し、ファイルおよびフォルダ構造をさらに定義し、必要に応じてテーマ ファイル (my-theme.scss で始まる) 内のすべてのミキシン、ユーティリティ、およびその他のフレームワーク要素を使用することにより、Sass と Bootstrap からより多くのものを得ています。