@mixin 변경 및 추가

@mixin left-top{

  position: absolute; top: 0; left: 0;

  @content;

}

.container{

  @include left-top;

  width: 300px;

  height: 300px;

  background-color: brown;

  .box{

    width: 200px;

    height: 200px;

    background-color: yellow;

    @include left-top{

      bottom: 0; right: 0; margin: auto;

    }

  }

}

저렇게 @content 넣어두면

@include 할 때 변경이나 추가를 할 수 있다.

 

물론 left-top 자체가 바뀌는 건아님.

 

사실

  .box{

    width: 200px;

    height: 200px;

    background-color: yellow;

    @include left-top;

    bottom: 0;

    right: 0;

    margin: auto;

  }

이거랑 차이는 별로 없음. 그냥 가독성 때문에 저런 식으로 하기도 하는 듯.