mixinでハック指定もまとめて書く

Yukimi Sato 23views 更新:2015年5月7日

mixin

@mixin border-radius($radius) { ←()の中に変数指定
  -webkit-border-radius: $radius; ←同じ変数指定
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

scss

.index{
  @include border-radius(3px) ; ←指定したい数値を入れる(pxなど単位もつけて)
}

css

.index{
  -webkit-border-radius: 3px; ←3pxがそのまま入る
     -moz-border-radius: 3px;
      -ms-border-radius: 3px;
          border-radius: 3px;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません