mixinとplaceholderの違い

ex_mixin.css

.menu > li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: gray; }

footer > li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  color: red; }

.btn {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 10px; }

ex_mixin.sass

=inline-block
  display: inline-block
  *display: inline
  *zoom: 1

.menu > li
  +inline-block
  background-color: gray

footer > li
  +inline-block
  color: red

.btn
  +inline-block
  padding: 10px

ex_placeholder.css

.menu > li, footer > li, .btn {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

.menu > li {
  background-color: gray; }

footer > li {
  color: red; }

.btn {
  padding: 10px; }

ex_placeholder.sass

%inline-block
  display: inline-block
  *display: inline
  *zoom: 1

.menu > li
  @extend %inline-block
  background-color: gray

footer > li
  @extend %inline-block
  color: red

.btn
  @extend %inline-block
  padding: 10px