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

@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;
}