すべてのカテゴリ

本日は、ポートフォリオブログで、mixinの使い方についてまとめておきました。【備忘録】Sassでmixinを使う 2022年01月10日 Sassで使うmixinについてまとめておきます。 ①mixinとはCSSのスタイルをパッケージしておくもの mixinとは、Sassで使うCSSスタイルをまとめておけるパッケージです。 必要な時にmixinを呼び出すことで、まとまったスタイルを適用できます。 ②　mixin基本形 mixinでパッケージを作ります。 使うときは、includeでパッケージを呼び出します。 これ以降、アットマークがこのブログで使えませんので、＊で代用しています。[Sass] ＊mixin example{ border: 1px solid #fff; margin: 10px auto; } //＊mixinにexampleという名前をつけました。 .box1{ ＊include example; background-color: #ccc; } //exampleという＊mixinを呼び出し、background-colorもつけました。 [CSSでの表記] .box1{ border: 1px solid #fff; margin: 10px auto; background-color: #ccc; } ＊includeで呼び出したことで、＊mixin内のスタイルも適用されます。 ③＊mixinに引数（ひきすう）を１つ使う このmixinにつける名前（ここではexample）に、引数を付けることができます。 引数とは、mixinパッケージの中

CSS設計を学ぶ保守性が高く、きれいなコーディングができるように。BEMはSassと相性が良いので、身につければきれいなコードで今より短時間で記述できるようになるだろう