【Sass】@mixinを使ってCSSを使い回す方法

03/14/2021

CSS

【Sass】@mixinを使ってCSSを使い回す方法

@mixinで使い回すCSSを指定します。

変数名はなんでもOKです。

そして@includeでmixinで指定したCSSを呼び出します。

// @mixinで複数のCSSプロパティを指定する
@mixin btn {
  display: inline-block;
  padding: 20px 60px;
  background: red;
  color: #fff;
}

// @includeで呼び出す
.btn {
  a {
    @include btn;
  }
}

コンパイルの結果が以下になります。

.btn a {
  display: inline-block;
  padding: 20px 60px;
  background: red;
  color: #fff;
}