BootstrapをSassを使ってカスタマイズする際に、カスタム用のSCSSを作成して変数を上書きすることを学んだ。 ただここで出てくる「!default」の意味がよく分からなかったのと、付き合いが長くなりそうな仕組み […]
Bootstrap5をSCSSを使ってカスタマイズする
SCSSの基本を学んだうえで、実際にBootstrapをメンテナンス性を保ちつつカスタマイズする方法をまとめておく。 既存のSCSSは触らない 1つ目のポイントは、Bootstrapを構成するSCSSには手を入れないこと […]
Bootstrap5を通して学ぶSCSS コアのSCSS
ベータ版ではあるが、bootstrap5がリリースされたのでSCSSの勉強がてら知識を深める。 Bootstrapと私 Bootstrapは何度か実務で使用したこともあるフレームワークで、3～4まで利用経験がある。 利用 […]
SCSS @mixin
一番使い勝手が良さそうな、mixin（ミックスイン）について。 基本の使い方 使いまわすスタイルをまとめておいて、使いたいシーンでインクルードすることができる。まずは実例。 コンパイルするとこうなる。 よく使うスタイルを […]
SCSS 変数、@extend
こまごま、SCSSの基本機能について整理しておく。 変数 SCSSではプログラミング言語のように変数を使用することができる。CSSのカスタムプロパティとは全く別の機能。 コンパイルするとこうなる。 カスタムプロパティとの […]
SCSS ファイルの分割とmapファイル
SassとSCSSについての基礎と環境構築は完了したので、具体的な実装まわりの基礎知識を整理する。 基本の記法 SCSSはCSSと基本が基本的には同じなので、既存のCSSの拡張子を.scssに変更するだけでも使用すること […]
SCSS入門 導入と環境づくり
bootstrap5がリリースされてしばらく経つので、そろそろ導入を検討。 社内ではSCSSを使用するユーザがいないので習得を先延ばしにしていた（自分以外にメンテナンスできなくなる）SCSSだが、時代の潮流に合わせて習得 […]