• HTMLCSS

【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プロパティを共通化して呼び出す方法について紹介しました。

以上で解説を終わります。