SASS의 리스트

이 문서에서는 SASS의 리스트에 대해 설명합니다.

SASS 리스트의 기본 및 고급 사용법을 다루고, 실용적인 예제도 제공합니다.

YouTube Video

SASS의 리스트

SASS는 CSS의 확장으로 유용한 프로그래밍 기능들을 제공합니다. 그 중에서도 리스트는 스타일을 동적으로 정의할 때 매우 유용한 기능입니다.

SASS 리스트란?

SASS 리스트는 쉼표(,)나 공백으로 구분된 값들의 집합입니다. CSS 속성에 여러 값을 전달하거나 반복 작업을 할 때 사용됩니다.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

리스트의 주요 특징은 다음과 같습니다:.

• 리스트에는 숫자, 문자열, 색상 등 다양한 데이터 타입의 값이 포함될 수 있습니다.
• 사용 목적에 따라 쉼표 구분 리스트와 공백 구분 리스트를 선택할 수 있습니다.

리스트를 이용한 스타일 정의의 기본 예제

아래는 리스트를 사용해 간단한 테두리 스타일을 동적으로 생성하는 예제입니다.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

컴파일 결과

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}

• sass:list 모듈의 nth() 함수를 사용하면 리스트에서 특정 값을 가져올 수 있습니다.

리스트 조작

sass:list 모듈은 리스트를 조작하는 함수를 제공하여 요소를 쉽게 가져오거나 추가할 수 있습니다.`.

요소 가져오기: nth()

nth()는 리스트에서 요소를 가져오는 함수입니다.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• 이 코드에서는 지정한 인덱스의 값을 얻기 위해 nth() 함수가 사용됩니다.

인덱스 확인: index()

index() 함수는 리스트에서 요소의 위치를 반환합니다.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• 이 코드에서 index()는 blue 요소가 리스트의 세 번째 항목임을 확인하는 데 사용됩니다.

리스트 길이 확인: length()

length()는 리스트의 길이를 반환하는 함수입니다.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• 이 코드에서는 리스트에 포함된 값의 개수를 구하기 위해 length() 함수가 사용됩니다.

요소 추가: append()

append()는 리스트에 요소를 추가할 때 사용하는 함수입니다.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• 이 코드에서는 리스트에 값을 추가하기 위해 append() 함수가 사용됩니다.

요소 교체: set-nth()

set-nth() 함수는 지정한 위치의 요소를 다른 값으로 교체합니다.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

• 이 코드에서 set-nth()는 두 번째 요소를 yellow로 교체하는 데 사용됩니다.

리스트 결합: join()

join() 함수는 두 개의 리스트를 결합하는 함수입니다.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• 이 코드에서 join() 함수는 두 개의 리스트를 하나로 결합하는 데 사용됩니다.

리스트 짝짓기: zip()

zip() 함수는 여러 리스트의 각 요소를 묶어 그룹화합니다.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

• 이 코드에서 zip()은 이름과 나이를 쌍으로 결합하는 데 사용됩니다.

중첩 리스트

리스트는 중첩할 수 있으므로 2차원 배열처럼 사용할 수 있습니다.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red

• 이와 같은 복잡한 데이터 구조를 다루면 고급 스타일 생성이 가능합니다.

실무 예제: 그라디언트 생성

여기 리스트를 사용해 그라디언트를 효율적으로 생성하는 예제가 있습니다.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

컴파일 결과

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

• 이 코드는 SCSS에서 리스트를 사용해 자동으로 그라디언트를 생성하는 예제입니다.

  • 그라디언트에 사용되는 색상들은 $colors 리스트에 정의되어 있습니다.
  • gradient() 함수에서는 색상 수에 따라 위치가 균등하게 계산되어 각 색상에 할당되고, 그라디언트용 리스트가 생성됩니다.
  • .background 클래스에서는 생성된 색상 리스트를 linear-gradient와 결합해 가로 방향의 그라디언트를 적용합니다.

• 색상 리스트의 길이에 맞게 위치가 자동으로 계산되므로 색상을 추가하거나 변경하는 것만으로 균일한 그라디언트를 쉽게 생성할 수 있습니다.

주의 사항 및 모범 사례

리스트를 사용할 때는 다음 사항을 고려할 수 있습니다:.

• 리스트 구분자 유형 쉼표 구분 리스트와 공백 구분 리스트는 다르게 처리되므로 상황에 따라 적절하게 선택해야 합니다.

• 리스트 크기 리스트를 동적으로 조작할 때는 length() 함수를 사용해 크기를 확인하는 것이 안전합니다.

• 중첩 리스트 관리 중첩 리스트를 다룰 때는 인덱스 조작을 주의하면 오류를 방지할 수 있습니다.

결론

SASS 리스트는 스타일을 동적으로 정의하고 복잡한 디자인을 효율적으로 관리할 수 있게 해주는 강력한 도구입니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video