Blog - SCSS 확장(extend)과 믹스인(mixin) 잘 사용하기
서론
오늘은 SCSS에서 사용하는 @extend와 @mixin에 대해서 알아볼 것이다.
간단히 말하지면, @extend는 다른 스타일을 가져와서 사용할 때,
@mixin은 공통적으로 쓰이는 속성들을 묶어서 관리해주는 역할을 한다.
@extend도 마찬가지로 공통적인 속성을 재사용할 때 유리하다.
시작해보기 앞서
지금까지 CSS만 쓰다가 SCSS를 쓰니까 이 둘의 차이점이 무엇인지 알아보자.
추가적으로 SASS도 간단히 설명하려 한다.
CSS(Cascading Style Sheets)
.wrap div:first-child{ border:3px;}
.wrap .box1:hover{color:#fff000;}
위의 코드는 wrap 클래스 하위의 div 태그의 첫번째 child에게 3px의 테두리를 주고,
wrap 클래스 하위의 box1 클래스에 마우스 커서가 올라가면 wrap의 색깔을 바꾸란 코드다.
이 코드를 SCSS로 바꾼다면
SCSS(Sassy CSS)
.wrap{
div{
&:first-child{
border: 3px;
}
}
.box1{
&:hover{
color: #fff000;
}
}
}
이처럼 더 구조적으로 표현이 가능하다. 이는 유지보수를 할 때 유용할 것이다.
물론 CSS의 모든 문법과 기능이 SCSS에서 사용할 수 있다.
뿐만 아니라 &기호가 사용되는데 이는 부모 선택자를 의미한다.
즉 순서대로 첫번째 &는 div를 의미하고 두번째 &는 .box1을 의미한다.
SASS
.wrap
div
&:first-child
border: 3px
.box1
&:hover
color: #fff000
SASS는 { } (중괄호)를 줄 간격으로 구분하고, ; (세미클론)도 줄바꿈으로 대체했다.
정리하자면 가장 큰 범용성과 호환성은 SCSS가 가장 뛰어나다.
내 블로그 템플릿의 제공자인 Minimal-mistake도 역시 SCSS로 CSS가 정리되어 있다.
SCSS와 SASS는 모두 결국 컴파일러에 의해서 CSS로 변환되는 것은 마찬가지이다.
단지, 가독성이 좋아지기 때문에 다른 팀원들과 작업 시에 의사소통을 원활하게 할 수 있을 것이다.
@extend
오늘의 메인은 @extend와 @mixin이므로 사용해보도록 하자.
먼저 @extend를 간단한 코드로 표현해보자면,
간단한 @extend 사용 예시
%brand-font {
font-family: webfont, sans-serif;
font-weight: 700;
}
h1 {
@extend %brand-font;
}
h2 {
@extend %brand-font;
}
위와 같이 연관성이 있는 선택자에 %brand-font와 같이 공통적으로 사용될 속성을 뺀 다음,
부여될 선택자에 @extend %brand-font와 같이 삽입해주는 형태이다.
이처럼 간단히 사용할 수 있기 때문에 마주칠 수 있는 이슈가 없을까 살펴보았다.
이내 하단의 블로그를 발견하였고,
[Sass에서 웬만하면 extend 말고 믹스인을 사용하자] 이다.
정리하자면 @extend를 오용하고 있는 경우가 많고,
@extend를 오용한 경우
%brand-font {
font-family: webfont, sans-serif;
font-weight: 700;
}
...
h1 {
@extend %brand-font;
font-size: 2em;
}
...
.btn {
@extend %brand-font;
display: inline-block;
padding: 1em;
}
...
.promo {
@extend %brand-font;
background-color: #BADA55;
color: #fff;
}
...
.footer-message {
@extend %brand-font;
font-size: 0.75em;
}
각 선택자들은 서로 연관성이 전혀 없고, 이러한 경우 @extend를 부여하면
컴파일 후
h1, .btn, .promo, .footer-message {
font-family: webfont, sans-serif;
font-weight: 700;
}
...
h1 {
font-size: 2em;
}
...
.btn {
display: inline-block;
padding: 1em;
}
...
.promo {
background-color: #BADA55;
color: #fff;
}
...
.footer-message {
font-size: 0.75em;
}
위와같이 컴파일이 되는데, 수백 라인 떨어져 있는 코드들이 한 곳에 묶이게 된다.
이는 명시도(Specificity)도 떨어지고,
컴파일 후 용량이 더 커지는 불상사가 발생할 수도 있다.
반면, 아래의 코드는 @extend를 올바르게 사용한 코드이다.
올바르게 사용한 @extend 코드
.btn,
%btn {
display: inline-block;
padding: 1em;
}
.btn-positive {
@extend %btn;
background-color: green;
color: white;
}
.btn-negative {
@extend %btn;
background-color: red;
color: white;
}
.btn-neutral {
@extend %btn;
background-color: lightgray;
color: black;
}
컴파일 후
.btn,
.btn-positive,
.btn-negative,
.btn-neutral {
display: inline-block;
padding: 1em;
}
.btn-positive {
background-color: green;
color: white;
}
.btn-negative {
background-color: red;
color: white;
}
.btn-neutral {
background-color: lightgray;
color: black;
}
위의 선택자들은 코드들은 코드 상으로 떨어져있지도 않고,
모두 버튼 속성이라는 연관성을 갖는다. 그러므로 이는 @extend를 적합하게 사용했다고 본다.
@mixin
@mixin은 단지 중복되는 코드를 제거하기 위해서 사용된다.
간단한 @mixin 사용 예시
@mixin site_color {
color: #f00;
}
.h1 {
@include site_color;
}
.btn {
@include site_color;
}
.proto {
@include site_color;
}
컴파일 후
.h1 {
color: #f00;
}
.btn {
color: #f00;
}
.proto {
color: #f00;
}
@mixin은 컴파일 후에 site_color의 속성이 그대로 선택자의 속성이 되었음을 알 수 있다.
이는 연관성이 없는 규칙을 따로 만들어서 사용하는 것이고,
코드를 반복하지 않고
재사용할 수 있다.
뿐만아니라, 함수처럼 동적인 값을 인자로 넘겨줄 수 있다.
@mixin 인자 값 사용 예시
@mixin truncate($width: 100%) {
width: $width;
max-width: 100%;
}
.foo {
@include truncate(100px);
}
컴파일 후
@mixin truncate($width: 100%) {
width: $width;
max-width: 100%;
}
.foo {
width: 100%;
max-width: 100%;
}
마무리
[Sass에서 웬만하면 extend 말고 믹스인을 사용하자]와
[mixin과 extend 알맞게 사용하기]를 참고하였습니다.
더 자세한 내용은 해당 블로그에 있으니 참고해주시면 감사하겠습니다.
댓글남기기