SASS - Extend, Mixin

Extend

@extend는 말그대로 css뭉치를 만드는 것을 의미한다. 같은 코드를 공유하고 싶다면 extend로 코드를 만들어 적용 시키면 된다.

%alert 에 공통으로 들어간 코드뭉치를 만들고 적용할 곳에 @extend %alert을 넣어주면 적용 된다.

Mixin

mixin은 프로그래밍 언어처럼 엘리먼트에 인자를 넣어서 사용할수 있다. mixin을 선언할때는 @mixin을 넣어주며 사용할때는 자식 엘리먼트에 @include 함수이름 (인자) 를 넣어주면 된다.

mixin에 @content를 넣어주면 각각의 자식 엘리먼트에서 인자를 받아올수있다.