작성
·
190
0
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로 하기보단 자바스크립트로 처리하는게 같이 일하는거나 가독성에 잇어서 괜찮아보이네여.. 개인적으로...
답변 1
1
첫번째 질문, content가 있어도 따로 코드 추가가 가능합니다. content는 보통 미디어쿼리, keyframes와 함께 사용됩니다. 사용예시는 https://thoughtbot.com/blog/sasss-content-directive에 나와있습니다
두번째 질문, 서로 관계 없는 클래스끼리 스타일 중복이 일어날 때 mixin을 사용하니까 같은 맥락으로 볼 수 있겠네요
extend와 mixin을 차이를 좀 더 알고 싶으시다면
https://mytory.net/2016/12/23/when-to-use-extend-when-to-use-a-mixin.html 를 참고하시면 될 것 같아요!
마지막 질문, scss의 if문은 일반적으로 mixin과 함께 사용됩니다. mixin에 들어오는 파라미터 값에 따라 다른 스타일을 적용할 수 있기 때문이예요 상황에 맞게 사용하시면 될 것 같습니다 :)