mockroNotes -モックロノート-

ガジェットやイラスト、ワークアウトに関心を示すブログです

Sassで@mixin

f:id:mockro:20210622103515p:plain@mixin(ミックスイン)を使えば、あるスタイルを定義したルールセットの内容を継承しつつ、新しいルールセットを作ることができます。 ここまでは@extendと同じですが、 @mixinは引数を指定して定義した @mixinの一部を変更して使うことができます。これにより、より柔軟な処理が可能になります。

@mixinを使ってみる

@mixinを使って、文字を画像にリプレイス(置き換え)してみましょう。 nirというミックスインにリプレイスに必要なプロパティを定義して、.logoからnirに必要な情報を引数として渡して継承します。

@import "compass";

@mixin nir ($img, $w, $h){
  width: $w
  height: $h;
  padding:0;
  margin:0;
  overflow: hidden;
  &:before{
    content:image-url($img);
    @include scale(.5);
    @include transform-origin(0, 0);
    display:inline-block;
    font-size:0;
    line-height:0;
  }
}

.logo {
  @include nir("logo.png", 80px, 80px);
}

↓ ↓ ↓ ↓コンパイル↓ ↓ ↓ ↓

.logo {
  width: 80px;
  height: 80px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.logo:before {
  content: url('images/logo.png?1522126163');
  -moz-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

ミックスインとして定義したnirには、「$img 」(画像の名前)、「$w 」(画像の幅)、「$h 」(画像の高さ)を引数に持たせています。

次に.logoルールセットで@include nir("logo.png", 80px, 80px);として、nirに引数「logo.png 」(画像の名前)、「80px 」(画像の幅)、「80px 」(画像の高さ)を渡しつつインクルードしています。

Retinaディスプレイ向けに画像の解像度を倍にするのでcompassでscale(.5);とtransform-origin(0, 0);をインクルードしています。


文字を画像にリプレイスすることが多いページを作る場合には、上記のようなミックスインを用意しておけば、画像の情報を渡してあげるだけで文字のリプレイスが完了します。

イデア次第で効率化できるルールセットもあるので、探してみると面白いかもしれなません。