지금까지 Sass 기초는 다 배웠고 이제는 우리의 작업을 조금 더 편하게 도와줄 Sass 문법을 배워볼 것이다.
바로 @를 붙여서 작성하는 At-Rules이다.
가장 많이 쓰이는 @mixin과 @include, @import, @use 등을 제외하고도 여러가지가 있는데
차근차근 알아보도록 하자.
📌 @mixin (믹스인 - 찍어내기)
믹스인은 공통으로 사용할 속성들을 묶어서 한번에 복사-붙여넣기 식으로 적용할 때 사용된다.
위의 사진과 같이 반복되는 속성을 한번에 처리할 수 있고, 그때문에 유지보수를 편리하게 할 수 있다.
또한 믹스인은 '인자'를 가질 수 있다.
속성은 동일하게 지정하지만 값은 다르게 주고 싶다면 아래와 같이 작성하면 된다.
굳이 모든 인자에 같은 값을 줄 필요 없이, 일부 인자에는 기본값을 주거나 특정 인자만 따로 넘기는 것도 가능하다.
만약 background-image 를 여러번 사용하는데 이미지 파일의 이름을 제외한 모든것이 같다면 ??
이런식으로 작성하는 것도 가능하다.
개인적으로 mixin을 가장 많이 사용하는 부분은 ①section의 padding 혹은 margin, ② 위에 설명했던 background-image, ③마지막으로는 미디어쿼리 작성시 이다.
📌 @extend (익스텐드 - 확장)
@extend는 말 그대로 '확장'이라는 뜻을 가지고 있으며 기본 내용에서 무언가를 덧붙일 때 사용한다.
이미 존재하는 셀렉터를 @extend로 지정해서 사용하면 된다.
컴파일된 css 파일을 살펴보면 공통되는 스타일을 가진 셀렉터끼리 묶여있는 모습을 볼 수 있다.
믹스인과 마찬가지로 반복되는 부분을 작성하지 않아도 된다.
🟡 @mixin과 @extend의 차이점
@mixin - 미리 정의한 속성을 복사-붙여넣기로 각각 적용
- 인자를 넣을 수 있다.
- 선택자 관리가 편리하다.
- 컴파일된 css가 길어진다.@extend - 선택자를 함께 묶어 속성을 한꺼번에 적용
- 연관성있는 셀렉터들을 묶어 관리할 수 있다.
- 미디어쿼리처럼 셀렉터가 묶인것이 아니라면 사용이 불가하다.개인적으로 mixin은 관련없는 태그들이 같은 속성을 가질 때, extend는 관련있는 태그들이 같은 속성을 가지고 있을 때 사용한다고 생각한다.
mixin의 예시로 들었던 main, contents, footer는 관련이 없지만 extend의 예시로 들었던 main, main_title, main_message는 "main"이라는 단어로 이어져있기 때문이다.
📌 @import 와 @use (모듈화)
일반적으로 css로 작업할 때 그렇게 해야하는 것은 아니나 파일이 많아지는 것을 방지하기 위해 하나 혹은 두개의 파일로 나눠서 모든 섹션의 내용을 작성한다.
하지만 헤더 / 메인 / 푸터 각 영역의 스타일을 나눠서 작업한다면 더 효율적으로 스타일시트를 관리할 수 있다.
예를 들면 header.scss / _main.scss / _footer.scss 와 같이 나누는 것이다.
(각각의 css파일이 컴파일 되지 않도록 파일이름 앞에 (언더바) 붙여줌!!!)
@import
모든 섹션들을 _xxxx.scss로 작성해 둔 후, 원래 css를 사용했던 것처럼 xxxx.scss 파일을 만들어준다. 그리고 나서 아래 이미지처럼 import로 불러오면 끝이다!
원래 일반 css에서도 스타일시트 내 다른 스타일시트를 임포트 할 수 있었다. 브라우저가 각각의 css를 직렬로 불러오기 때문이다. (차례대로 요청하느라 로딩 속도 느려짐)
하지만 Sass에서는 "컴파일 과정에서 모든 것이 처리되기 때문에" HTTP 요청을 여러 번 하지 않아도 된다.
@use
@import는 쉽고 빠르게 다른 스타일 시트를 가져올 수 있지만 Dart Sass를 사용하고 있다면 @use를 사용하는 것이 좋다.
@import는 대상을 전역으로 불러오기 때문에 변수, 믹스인, 함수 등에서 이름이 서로 충돌할 수 있다는 단점이 있다.
🔴🟠🟡🟢🔵🟣 @use의 특징 🟣🔵🟢🟡🟠🔴
- 항상 파일 시작부분에 쓰여야 한다. 스타일 규칙에 포함될 수 없다.
- 가져온 것들은 모두 네임스페이스를 가진다.
- 여러번 @use 하더라도 중복해서 가져오지 않는다.
- 언더바 혹은 하이픈으로 시작하면 가져오지 않는다.