Mixins, HTML 코드를 재사용하는 방법

 

Mixin

mixin은 partials와 같은 것인데,

데이터를 받을 수 있는 똑똑한 partial을 말합니다.

 

만약 우리가 반복해서 등장하는 HTML 블록이 필요한데,

이 블록은 같은 형태를 지니지만 서로 다른 데이터를 가져야 한다면 어떨까요?

 

이게 바로 우리가 mixin을 이용할 때 입니다.

include partials/footer

이전에 만든 partials은 데이터가 변경되지않고 동일합니다.

 

video 라는 파일을 mixins폴더에 만들어봅시다.

그런다음 이 video라는파일에 아래와같이 입력해줍니다.

 

mixin한다음에 mixin이름을입력하고 mixin이 받게될 데이터를 넣어줍니다.

그런다음 우리가원하는것을 입력해줍니다.

Html구조같은것을...

 

아래코드에서 info는 mixin이 받게 될 데이터를 지칭합니다.

mixin video(info)
    div
        h4=info.title
        ul
            li #{info.rating}/5
            li #{info.comments} comments.
            li Posted #{info.createdAt}
            li #{info.views} views.

include mixins/video 라고 파일을 include해주고,

그런다음 위에 코드에서 mixin의 이름인 video를 home파일에 

+video(video) <--- 이렇게 입력해줍니다.

extends base
include mixins/video

block content
    h2 Welcome here you will see the trending videos
	each video in videos
        +video(video)
    else
        li Sorry nothig found.

each X in Y

Y안의 각각의 X에 대해서 동일한 작업을 할 수 있습니다.

여기서 Y는 우리가 현재 가지고 있는 array를 뜻합니다.