ベータ版ではあるが、bootstrap5がリリースされたのでSCSSの勉強がてら知識を深める。 Bootstrapと私 Bootstrapは何度か実務で使用したこともあるフレームワークで、3~4まで利用経験がある。 利用 […]
SCSS @mixin
一番使い勝手が良さそうな、mixin(ミックスイン)について。 基本の使い方 使いまわすスタイルをまとめておいて、使いたいシーンでインクルードすることができる。まずは実例。 コンパイルするとこうなる。 よく使うスタイルを […]
SCSS 変数、@extend
こまごま、SCSSの基本機能について整理しておく。 変数 SCSSではプログラミング言語のように変数を使用することができる。CSSのカスタムプロパティとは全く別の機能。 コンパイルするとこうなる。 カスタムプロパティとの […]
BEMに基づくCSS設計
SCSSを学習するにあたって、BEMによるCSSのクラス名等をおさらいする必要が出てきたのでまとめておく。 BEMとは Block Element Modifier の頭文字からきており、 Block -> 大きな […]
SCSS ファイルの分割とmapファイル
SassとSCSSについての基礎と環境構築は完了したので、具体的な実装まわりの基礎知識を整理する。 基本の記法 SCSSはCSSと基本が基本的には同じなので、既存のCSSの拡張子を.scssに変更するだけでも使用すること […]
SCSS入門 導入と環境づくり
bootstrap5がリリースされてしばらく経つので、そろそろ導入を検討。 社内ではSCSSを使用するユーザがいないので習得を先延ばしにしていた(自分以外にメンテナンスできなくなる)SCSSだが、時代の潮流に合わせて習得 […]