【sass】@mixinを使って汎用するCSSプロパティを共通化して呼び出す方法

sassでよく使うCSSプロパティを共通化。
共通化したコードを呼び出したい。
本記事ではこのような悩みを解決します。
CSSプロパティを共通化して呼び出す
// CSSを共通化。
@mixin colorRed {
color: red;
text-decoration: underline;
}
p {
// 呼び出す
@include colorRed;
}
span {
// 呼び出す
@include colorRed;
}
CSSプロパティを共通化したコード例です。
@mixinを使います。
使い方は以下の通りです。
// CSSを共通化。
@mixin 任意のmixin名 {
共通化したいCSSプロパティ
}
p {
// 呼び出す
@include mixin名;
}
@mixinの後に任意のmixin名を記述します。(本コード例ではcolorRed)
ブロック化して、共通化したいCSSプロパティを記述します。
呼び出したいセレクタのブロック内で@include 先ほど定義したmixin名;を記述すれば実装完了です。
呼び出し先で共通化したコードが反映されていれば成功です。
まとめ
sassの@mixinを使って汎用するCSSプロパティを共通化して呼び出す方法について紹介しました。
以上で解説を終わります。
目次