들어가며
SCSS에서 있는 내장 함수들을 처음 볼 때 정의된 내용과 실제 사용할 코드에는 크게 와닿지 않아, 언제 어떻게 이것들을 활용할 수 있을까 생각했습니다. 최근 반복적인 코드를 사용하면서 CSS 코드를 좀 더 간결하게 작성하고 싶은 마음이 들어 찾아보게 되어, 다른 분들에게도 이런 기능도 있다는 것을 상기시켜드리고 싶습니다.
이 글을 읽기 전에 혹시 아직 SCSS에 대해 잘 모르겠다 하는 분은 NY 책임님이 작성해주신 Sass 맛보기 #1 를 먼저 읽어주세요!
List 내장함수
List 내장함수에는 nth, index, append, is-brackted, join, length, set-nth, zip 과 같은 함수가 있습니다. index, append, join, length 와 같은 함수는 javascript 혹은 jQuery에서 익숙하게 봤을 텐데 동일한 의미로 사용되고 있습니다.
저는 이번에 한 화면에 움직이는 요소가 있는 화면을 작업해야 했는데요. 각 요소의 크기, 위치, 이미지 크기를 선언하는데 움직이는 요소가 늘어날수록 width, height, top, left, background-size, background-url 등등 계속 동일한 코드가 늘어나는 걸 보며 SCSS에 더 간결하게 해 줄 수 있는 함수가 있을 거라고 생각을 하게 됩니다.
.animation-item {
.x-small {
top: 30px;
left: 50px;
width: 110px;
height: 50px;
line-height: 50px;
color: blue;
background: url(https://via.placeholder.com/110x50);
background-size: 110px 50px;
}
.small {
top: 150px;
left: 130px;
width: 120px;
height: 60px;
line-height: 60px;
color: red;
background: url(https://via.placeholder.com/110x50);
background-size: 120px 60px;
}
// .medium, .large, .x-large ...등 움직여야할 요소가 계속 늘어난다면 해당 코드들을 계속 복사 붙여넣고 변경해줘야하겠죠?
}그래서 저는 변수로 요소의 클래스명, 크기, 위치값들을 정의하고 @each 또는 @for 반복문으로 코드를 반복해 줍니다. nth, index, append, join, length, zip 함수를 이용해서 변수로 담은 리스트들의 값을 해당 요소에 매핑하기로 생각합니다. 그러면 움직여야 할 요소들이 늘어나면 변수에 담은 리스트 배열에 필요한 수치만 추가해 주면 됩니다.
- nth(리스트 배열, 선택할 인덱스) : 배열의 특정 인덱스의 값을 반환해 줍니다.
- index(리스트 배열, 비교인자) : 배열의 특정 인덱스를 반환해 줍니다.
- append(리스트 배열, 조합할 인자, $separator) : 리스트(or 텍스트)의 맨 뒤 추가되어 반환해 줍니다, $separator의 종류는 comma, space, slash이며 없을 경우는 space로 조합이 됩니다.
- join(조합할 인자 1, 조합할 인자 2, $separator) : 두 개의 리스트를 하나로 조합하여 반환해 줍니다. $separator의 종류는 comma, space, slash이며 없을 경우는 space로 조합이 됩니다.
- length(리스트 배열) : 배열의 길이를 반환해 줍니다.
- zip (조합할 인자 1, 조합할 인자 2) : 각 리스트의 같은 인덱스의 데이터들끼리 결합해 줍니다.
(append, join, zip 엄연히 리스트 배열로 사용할 때는 다른 용도로 사용되지만, 아래 예제에서는 개별 값인 단일 요소 목록으로 계산된 값은 동일하게 작동됩니다.)
$itemWidth: 110px, 120px, 130px, 140px, 150px; // 요소 넓이
$itemHeight: 50px, 60px, 70px, 80px, 90px; // 요소 높이
$itemX: 50px, 130px, 300px, 250px, 400px; // 요소 position X 좌표
$itemY: 30px, 150px, 150px, 30px, 20px; // 요소 position Y 좌표
$itemName: x-small, small, medium, large, x-large; // 요소 클래스명
$itemColor: blue, red, green, yellow, black; // 요소 폰트 컬러
.animation-item {
// 1. 특정 클래스명을 정의한 경우
@each $item in $itemName {
$index: index($itemName, $item);
// index([x-small, small, medium, large, x-large], x-small) === 1
top: nth($itemY, $index); // nth([30px, 150px, 150px, 30px, 20px], 1) == 30px
left: nth($itemX, $index);
width: nth($itemWidth, $index);
height: nth($itemHeight, $index);
color: nth($itemColor, $index);
// 1) join를 사용하는 경우
$backgroundSize: join(
nth($itemWidth, $index),
nth($itemHeight, $index)
); // join(110px, 50px) === 110px 50px
// 2) append를 사용하는 경우
$backgroundSize: append(nth($itemWidth, $index), nth($itemHeight, $index));
// 3) zip을 사용하는 경우
// $backgroundSize: zip(nth($itemWidth, $index), nth($itemHeight, $index));
background-size: $backgroundSize;
}
// 2. 특정 클래스명 없이 데이터 개수를 이용한 경우
@for $index from 1 to length($itemWidth) + 1 {
// length($itemWidth) === 5
}
}-
특정 클래스명을 정의한 경우
-
특정 클래스명 없이 데이터 개수를 이용한 경우
마치며
SCSS는 CSS 코드를 깔끔하게 정리하고, 반복 작업을 줄여 코드의 재활용성이나 가독성을 높여 유지 보수를 쉽게 도와주는 언어의 목적으로 사용하고 있습니다. import, variable, mixin, extend 기능을 이용하는 것에서 이번에 소개한 List 내장함수 외에도 다양한 내장함수를 유용하게 사용하여 공유할 수 있는 기회가 있으면 좋겠습니다.
읽어주셔서 감사합니다.