Sassの @extendを利用してコンパクトに記述する

harada 15views 更新:2015年4月13日

@extendを利用するには、利用したいスタイルがどこかのclassにまとめて記述されているという前提条件があります。

引用元class

.ex_class {
  margin: 5px 0;
  padding: 5px;
  border: solid 3px #66cccc;
}

記述方法

.ex_class_sub {
  @extend .ex_class;
  border: solid 3px #cccccc;
}

生成

このように自動でまとめてくれます。

.ex_class, .ex_class_sub {
  margin: 5px 0;
  padding: 5px;
  border: solid 3px #66cccc;
}

.ex_class_sub {
  border: solid 3px #cccccc;
}

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

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

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