SASS - 믹스인

기존 css는 재사용성이 매우 떨어졌다. 그러나 sass에서는 특정 부분을 컴포넌트 화 시켜 다른 파일에서 import 해서 사용할 수 있도록 하는데 이 기능을 mixin이라 한다.

1. 기본 mixin

1 2 3 4 5 6 7

@mixin radius($rad1, $rad2, $rad3, $rad4){ border-radius: $rad1 $rad2 $rad3 $rad4; } .example{ @include radius(2px, 3px, 5px, 6px) /* mixin 끌고오기 */ }

2. @content

1 2 3 4 5 6 7 8 9 10 11 12

@mixin small-screen { @media screen and (min-width: 800px;) { @content; /* 이렇게 include안의 내용을 넣을 수 있다 */ } } @include small-screen { .container { background: red; } }

3. 매개변수의 기본값 지정

1 2 3 4 5 6 7 8

@mixin example ($color: blue, $borderColor: green) { color: $color; border: 1px solid $borderColor; } footer, header { @include example ($borderColor: #ccc); }