[SCSS] @use "sass:map", @use "sass:list"

목차

 

 

 @use "sass:map", @use "sass:list"

 

@use는 무엇인가?

• @use는 Sass에서 다른 Sass 파일이나 Sass 내장 모듈을 불러올 때 사용하는 구문이다.

"sass:map", "sass:list"

• 위 두개는 각각 Sass의 내장 모듈인 'map'과 'list'를 불러온다.
• 해당 모듈들은 Sass에서 맵과 리스트를 다룰 수 있는 다양한 유용한 함수들을 제공한다.

@use "sass:map"

• 이 구문은 Sass의 'map' 모듈을 불러온다. 'map' 모듈은 키와 값의 쌍으로 이루어진 맵 데이터를 처리하는 함수를 제공한다. 
  
  • 'map-remove($map, $keys...)' : 맵에서 특정 키를 제거한다.
  • 'map-keys($map)' : 맵의 모든 키를 반환한다.
  • 'map-values($map)' : 맵의 모든 값을 반환한다.

 'map-get($map, $key)'  : 맵에서 특정 키의 값을 가져온다.

@use "sass:map";

$colors: (
  primary: #ff0000,
  secondary: #00ff00,
  background: #0000ff
);

.primary-color {
  color: map.get($colors, primary);
}

 

 'map-merge($map1, $map2) ' :  두 개의 맵을 합친다.

@use "sass:map";

$colors1: (
  primary: #ff0000,
  secondary: #00ff00
);

$colors2: (
  background: #0000ff,
  accent: #ffff00
);

$merged-colors: map.merge($colors1, $colors2);

.all-colors {
  // 예를 들어 primary 색상을 사용
  color: map.get($merged-colors, primary);
}

 

 'map-remove($map, $keys...)' : 맵에서 특정 키 제거하기

@use "sass:map";

$colors: (
  primary: #ff0000,
  secondary: #00ff00,
  background: #0000ff
);

$updated-colors: map.remove($colors, secondary, background);

.primary-only {
  color: map.get($updated-colors, primary);
}

 

 'map-keys($map)' : 맵의 모든 키 반환하기

@use "sass:map";

$colors: (
  primary: #ff0000,
  secondary: #00ff00,
  background: #0000ff
);

$keys: map.keys($colors);

// 사용 예시로, 첫 번째 키를 가져와 사용
.first-key {
  content: map.get($colors, nth($keys, 1));
}

 

 'map-values($map)' : 맵의 모든 값 반환하기

@use "sass:map";

$colors: (
  primary: #ff0000,
  secondary: #00ff00,
  background: #0000ff
);

$values: map.values($colors);

// 사용 예시로, 첫 번째 값을 가져와 사용
.first-value {
  color: nth($values, 1);
}

 

@use 'sass:list'

• 이 구문은 Sass의 'list' 모듈을 불러온다. 'list' 모듈은 리스트 데이터를 처리하는 함수들을 제공한다. 리스트는 여러 개의 값을 순서대로 나열한 데이터 구조이다. 'list' 모듈에서 제공하는 주요 함수들은 다음과 같다.
  • 'list-append($list, $value, $separator: auto)'  : 리스트에 값을 추가한다.
  • 'list-combine($list1, $list2, $separator: auto)' : 두 리스트를 결합합니다.
  • 'list-index($list, $value)' : 리스트에서 특정 값의 인덱스를 반환합니다.
  • 'list-separator($list)' : 리스트의 구분자를 반환합니다.
  • 'list-join($list1, $list2, $separator: auto)' : 두 리스트를 합칩니다.

 'list-append($list, $value, $separator: auto)' : 리스트에 값을 추가하기

@use "sass:map";

$colors: (
  primary: #ff0000,
  secondary: #00ff00,
  background: #0000ff
);

$values: map.values($colors);

// 사용 예시로, 첫 번째 값을 가져와 사용
.first-value {
  color: nth($values, 1);
}

 

 'list-combine($list1, $list2, $separator: auto)`: 두 리스트를 결합하기

@use "sass:list";

$list1: ('Arial', 'Helvetica');
$list2: ('sans-serif', 'Roboto');

$combined-list: list.combine($list1, $list2);

body {
  font-family: list.join($combined-list, ', ');
}

 

 'list-index($list, $value)' : 리스트에서 특정 값의 인덱스 반환하기

@use "sass:list";

$fonts: ('Arial', 'Helvetica', 'sans-serif');
$index: list.index($fonts, 'Helvetica');

body {
  // 사용 예시로, 인덱스 값 표시
  content: $index;
}

 

 'list-separator($list)' : 리스트의 구분자 반환하기

@use "sass:list";

$fonts: 'Arial' 'Helvetica' 'sans-serif';
$separator: list.separator($fonts);

body {
  // 사용 예시로, 구분자 표시
  content: $separator; // 공백으로 구분된 리스트일 경우 'space'
}

 

 'list-join($list1, $list2, $separator: auto)' : 두 리스트를 합치기

@use "sass:list";

$list1: ('Arial', 'Helvetica');
$list2: ('sans-serif', 'Roboto');

$joined-list: list.join($list1, $list2, ', ');

body {
  font-family: $joined-list; // "Arial, Helvetica, sans-serif, Roboto"
}