[SCSS] - 13. 중첩 @mixin

중첩 @mixin

👊 예제

<section>
        <h1>Large Headline Text</h1>
        <h2>Medium Headline Text</h2>
        <h3>Small Headline Text</h3>
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum impedit animi molestias fuga inventore ipsum id quaerat expedita. Ex excepturi iure in eaque, tempora quia quos pariatur doloribus minima nam,
        </p>
    </section>

• 나는 제목부분과 본문부분의 글씨체를 다르게 하고싶다.
• 나는 제목태그들은 공통적인 속성을 주고싶다.
• 나는 전체 body에 공통적인 속성을 주고싶다.

$font-base : 15px;
$font-family-base : "Raleway";
$font-family-headline : 'Montserrat';

• 기본 디폴트 폰트 사이즈와 font-family를 변수로 정의해준다.

전체 body에 공통 속성

@mixin font-default {
    font : {
        family: $font-family-base;
        size: $font-base;
        weight: 300;
    }

    line-height: 1.6em;
}

body {
    @include font-default();
}

• @mixin을 활용해서 기본 디폴트 속성을 정의한다.
• 디폴트 폰트 패밀리, 사이즈, 굵기를 설정하고 body에 @include함

제목 태그들에 공통 속성

@mixin font-headline {
    font: {
        family: $font-family-headline;
        weight: 600
    }
}

@mixin large-headline {
    @include font-headline();
    font-size: $font-base * 3;
    color: crimson;
}

@mixin medium-headline {
    @include font-headline();
    font-size: $font-base * 2;
    color: royalblue;
}

@mixin small-headline {
    @include font-headline();
    font-size: $font-base * 1.5;
    color: yellowgreen;
}

• font-headline라는 속성은 헤드라인에 모두 적용하고 large-headline, medium-headline, small-headline에는 font-headline을 include하고 추가로 폰트 컬러와 사이즈를 정의해준다.
• 이때 사용한것이 중첩 @mixin이다.

h1 {
    @include large-headline();
}

h2 {
    @include medium-headline();
}

h3 {
    @include small-headline();
}

🙆 RESULT