나머지 중요한 문법들을 알아보자.
Sass 문법 4. 코드를 한단어로 축약하는 @mixin
저번 시간에 배운 변수랑 매우 유사하다.
변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었는데, @mixin은 스타일 여러줄을 한 단어로 치환해서 사용가능하다.
@mixin 버튼기본디자인() {
font-size : 16px;
padding : 10px;
}
.btn-green {
@include 버튼기본디자인();
background : green;
}-
@mixin이라고 쓰고, -
이름을 하나 지어주고
( ){ }붙이고, -
한 단어로 치환할 값들을 중괄호 안에 쭉 나열하시면 된다.
그럼 이제 밑에서 자유롭게 @include mixin이름 으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙된다.
아무튼 여러줄을 한 단어로 치환해서 쓰고싶을 때 쓰는 문법이 바로 @mixin 이다.
얼핏 보면 mixin과 extend 문법은 유사하지 않습니까??
제가보기엔 거의 똑같습니다. extend가 약간 더 쓰기 편하다는 장점이 있는거 말곤요.
근데 mixin만의 장점이 하나 있는데, 바로 내부에 묶어둔 속성들에 구멍을 하나 뿅 뚫어줄 수 있다는겁니다.
@mixin 버튼기본디자인($구멍) {
font-size : 16px;
padding : 10px;
background : $구멍;
}소괄호의 역할이 바로 구멍인데,
이제 버튼기본디자인()이라는 단어를 사용하실 때 소괄호구멍 안에 아무거나 값을 집어넣을 수 있습니다.
구멍에 뭘 넣으면 어떻게되냐고요?
저기 background : 옆에있는 또 하나의 구멍 보이시죠? 저기로로 슈웅~하고 들어간다.
버튼기본디자인(바보) 이렇게 쓰면,
바보라는 글자가 숑~하고 들어와서 background : 바보가 되는거다.
@mixin 버튼기본디자인($구멍) {
font-size : 16px;
padding : 10px;
background : $구멍;
}
.btn-green {
@include 버튼기본디자인(#229f72);
}코드를 이렇게 짜놓으면
.btn-green 이라는 클래스는 안에 어떤 내용으로 채워질까요?
font-size : 16px;
padding : 10px;
background : #229f72;
이렇게 되지 않을까요그럼 응용하면 btn-green 말고도 파란버튼, 빨간버튼 자유자재로 만드실 수 있겠죠.
이것이
mixin의 장점이라고 보시면 됩니다.
1. 긴 코드를 한 단어로 축약할 수도 있고
2. 코드내부에 구멍을 뚫어 사용할 때마다 각각 다른 내용을 집어넣을 수 있다.
Sass 문법 5. @use와 언더바 파일
CSS파일마다 맨위에 첨부하는 reset같은걸 자주 복붙하는 분들은
import문법을 사용하시길 바랍니다.
복붙시간을 줄여줄 수 있습니다.
@use 'reset.scss';이러면 reset.scss 파일을 해당 SCSS파일에 전부 복붙할 수 있습니다.
파일이 다른 폴더 안에 있다면 '폴더명/reset.scss' 이런 식으로 경로를 잘 써주시면 됩니다.
@use '_reset.scss';scss 파일명을 작명할 때, 언더바를 파일명 맨 앞에 붙이는 경우가 있습니다.
언더바 _기호를 파일명 맨앞에 사용하시면 "이 파일은 CSS파일로 따로 컴파일하지 말아주세요" 라는 의미입니다.
그냥 첨부용 파일이라는 것이지요.
@use '_reset.scss';
reset.$변수명; /* 다른 파일의 변수쓰는법 */
@include reset.mixin이름(); /* 다른 파일의 mixin쓰는법 */@use 해온 다른 파일에 있던 $변수와 @mixin을 가져다 쓸 수도 있습니다.
이 경우엔 그냥 쓰는게 아니라 꼭 파일명을 앞에 붙여야합니다.
응용하면 다른 파일에서 자주 사용할법한 _button.scss _navbar.scss 이런 파일들을 미리 다 만들어놓고
멋지게 첨부식으로 CSS를 개발할 수 있습니다.
항상 @use 사용할 땐 파일 경로만 조심하면 되겠습니다.
