mixin과 extend 질문입니다

mixin을 사용 할 때 

@mixin flex{

 display:flex;

 justify-content : center;

 align-items : center 

@ content

}

.div{

@include flex;

추가코드 {

}

}

이렇게 사용하라고 하셨는데 뒤에 @content의 등장으로 좀 헷갈리네요  mixin에 @content를 사용 안하고 그냥 include하고 밑에 추가로 코드를 적으면 에러가 나나요?

-----------------------------------------------

extend에서 

mixin은 관계 없는 선택자에서 조금 다른 스타일을 적용 할 때 사용이라는 말이

→ 서로 관계가 없지만 스타일값을 땡겨 받고 싶으면 사용한다고 이해하는게 맞을까요? 

그리고 extend에서 @extend .클래스명이 아닌

@extend %선언명 을 사용 하는 것이 @content처럼 밑에 추가코드를 적을 수 있어서 사용을 권장하시는건가요?

마지막으로 scss의 if문 같은경우 다크모드의 사용이 유용해 보이는데 마지막 챕터는 scss로 하기보단 자바스크립트로 처리하는게 같이 일하는거나 가독성에 잇어서 괜찮아보이네여.. 개인적으로...