CSS 심화 (3)

조건과 반복

• @if 조건에 소괄호를 열고 닫지 않아도 된다.
• 반복문
  1) @for $요소 from 시작점 through 끝나는지점
  ... for (let i = 0; i < 3; i++) 와 같음
  sass 에서는 through 대신 to 를 사용가능하다. (through 는 끝나는 지점을 포함하지만 to 는 끝나는 지점 직전까지만 반복한다.)
  2) @each $변수내부요소 in $변수
  3) while ($변수 > 0) { ... } ... 소괄호 생략 가능하며, 무한루프를 유의한다.
  
• 내장모듈 @use "sass:list"; 를 통해
  $index: list.index($리스트 데이터, $찾을 아이템) 와 같이 인덱스를 추출할 수 있다.
  

---

내장모듈

sass:color

• color.adjust(타겟 색상, 찾을 색상, 정도) ... 타겟 색상에서 찾을 색상을 어느정도 증감한 결과값을 반환
  사용가능한 키워드: $lightness(밝기), $saturation(채도)
• darken(color, amount) ... amount(%) 정도 어두워진 결과를 반환 (전역변수를 사용한 방법)
• color.adjust($primary, $lightness: -20%) ... darken 을 color 내장모듈로 구현한 방법
• color.grayscale(타겟 색상) ... 타겟 색상을 회색조로 바꿈
• color.invert(타겟 색상) ... 타겟 색상의 색조를 반전시킴

sass:list

• list.append($list, 추가할 데이터) ... list 뒤에 데이터를 추가함 (js 의 .push() 와 비슷함)
• list.index($list, $item) ... list 배열에서 item 의 index 를 반환함 / zero-base 가 아님!
• list.length($list1, $list2) ... list1, list2 배열을 병합
• list.length($list) ... list 배열의 길이를 반환
• list.nth($list, 순서) ... list 에서 순서에 해당하는 아이템을 선택함 / 1부터 시작

sass:map

• map.get($map, name) ... 첫 번째 인수로 map 데이터를, 두 번째 인수로 map 데이터에서 조회할 key 값을 넣어줌
• map.has-key($map, name) ... map 데이터에 name 이라는 키 값이 존재하는지의 여부를 반환 (@if 와 함께 사용될 수 있음)
• map.keys($map) ... map 데이터의 key 의 list 배열 데이터를 반환
• map.values($map) ... map 데이터의 value 의 list 배열 데이터를 반환
• map.merge($map1, $map2) ... map 데이터들을 병합 / 중복된 key 는 하나로 고유화 처리가 됨 (뒤에 작성한 인수가 앞에 작성된 인수의 키를 덮어쓰게 됨)
• map.remove($map, name) ... map 데이터의 name 에 해당하는 key 를 지움 / 직접 제거하는 것은 불가능하고, 변수에 할당하여 지워진 map 을 반환하는 방식으로 사용한다.

cf) 따옴표를 제거하여 사용해야 할 경우 sass:string 내장 모듈을 통해 string.unquote(map.get(~~)) 를 사용할 수 있다.

sass:math

• .ceil(올림), .floor(내림), .round(반올림), .max/min(list ... 최대/최솟값), .abs(절댓값)
• math.is-unitless(data) ... 데이터의 단위가 있는지 확인 (true / false)
• math.compatible(data1, data2) ... 데이터가 서로 연산이 가능한지 여부를 확인

sass:meta

• sass는 콜백함수를 구현할 수 있으며 meta.call($callback, data) { ... @return ~~ } 의 형태로 정의할 수 있다.
• meta.type-of($value) ... 인자의 타입을 반환

sass:string

• .quote(따옴표를 붙여줌), .unquote(따옴표 제거), .length(길이 반환), .to-upper-case(대문자화), .to-lower-case(소문자화)
• string.index(str1, str2) ... 두 번째 인자가 첫 번째 인자의 몇 번째 인덱스에서 시작하는지를 반환
• string.insert(str1, str2, index) ... 두 번째 인자를 첫 번째 인자의 index 부분에 삽입함 (index 가 음수일 시, 뒤에서부터 시작)
• string.slice(str, num) / string.index(str, start, end) ... 두 번째(혹은 세 번째 인자까지) 인자의 조건에 맞게 문자열을 잘라냄
• string.unique-id() ... 메서드가 실행될 때마다 고유한 문자를 반환함

---

회고

sass 도 모듈화하여 css 를 마치 JS 처럼 구현할 수 있다는 점을 배울 수 있었다. 이제까지 알고있던 css 와는 구현방법이나 개념들이 살짝 결이 다르게 느껴지기 때문에 js 와 비슷한 개념을 사용하고 있어도 익숙해지기에는 시간이 걸릴 것 같다.
모듈을 어디에서부터 어디까지 mixin 으로 관리해야 할지 아직은 감이 잘 오지 않아서 여러방면으로 검색을 해보면서 공부해야 할 것 같다.