@content
는 @mixin
내의 추가적으로 필요한 내용을 덧 붙이는 용도로 사용합니다.@include
로 호출하여 중괄호 내에 더해줄 추가적인 내용을 입력해주면 됩니다.SCSS
@mixin left-top { position: absolute; top: 0; left: 0; @content; } .container { width: 100px; height: 100px; @include left-top; } .box { width: 200px; height: 300px; @include left-top { // @include로 호출하여 중괄호 내에 더해줄 추가적인 내용을 입력해주면 됩니다. bottom: 0; right: 0; margin: auto; } }
CSS
.container { width: 100px; height: 100px; position: absolute; top: 0; left: 0; } .box { width: 200px; height: 300px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }