Written by Kasumi

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

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

目次

関連記事

HTMLCSS

【CSS】formタグ内のデフォルトCSSをリセットする方法

更新日:2019.11.28
898
HTMLCSS

CSSでテキスト選択を不可・禁止にする方法

2023.01.26
1513
HTMLCSS

【コピペ用】CSSでへこむボタンを作成する方法

2022.06.11
3295
HTMLCSS

【HTML】OGPタグを設定してfacebookやtwitterに記事を発信しよう

更新日:2019.11.28
774