SCSS 문법

전역 범위 변수

:root{ ... } 전역 범위의 변수를 만들기 위해 사용

:root {
  --main-color: #111111;
  --default-color: #111111;
  --hover-color: #595c60;
  --active-color: #2d2d2d;
  --disabled-color: #a0a0a0;
  --background-color: #f1f3f6;
}

지역 범위 변수

지역 범위로 생성하려면 변수를 사용할 선택기 내부에 선언

여기서 잠깐! scss는 변수명의 하이픈(-)과 언더바(_)를 구분하지 않음, key_color = key-color

$error-colors: (
  'default': $error-color,
  'hover': #cb0837,
  'active': #b8002c,
  'disabled': #e6849c,
);

.nav {
  height: 90px;
  background-color: $main-color;
  box-shadow: 2px 2px 6px -2px rgba(26, 31, 38, 0.1);
  width: 100vw;
  min-width: $main-width;
}

var()

주어진 속성이 유효하지 않을 경우 대체해 사용할 값

**var( <custom-property-name> , <declaration-value>);**
var(--header-color, blue);

• var(사용자 지정 속성의 이름, 대체값);
• 해당 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없음
• <custom-property-name> : 두개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자
• <declaration-value> : 현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체 값

/* Fallback */
/* In the component’s style: */
.component .header {
  color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */
}

.component .text {
  color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
  --text-color: #080;
}

map

key1:value1, jet2:value2... 형식의 데이터, map 형태로 list 함수 사용 가능, 변경 불가 (새로 생성)

1. map.get
   1. map에서 지정 Key의 값을 반환

   **map.get(<map>, <key>);**
   
   $font-sizes: ("small":12px, "normal":18px, "large":24px)
   map.get($font-sizes, "small");
   
   // result: 12px
   

2. map.has.key
   1. map이 지정 key를 갖고 있는지 여부 체크. true / false 반환

   **map.has.key(<map>, <key>);**
   
   $font-sizes: ("small":12px, "normal":18px, "large":24px);
   map.has.key($font-sizes, "big");
   
   // result: false
   

3. map.keys
   1. map의 ahems key 리스트 반환

   **map.keys(<map>);**
   
   $font-sizes: ("small":12px, "normal":18px, "large":24px);
   map.keys($font-sizes);
   
   //result: "small", "normal", "large"
   

4. map.merge
   1. map1의 끝에 map2를 추가

   **map.merge(<map1>, <map2>);**
   
   $font-sizes: ("small":12px, "normal":18px, "large":24px);
   $font-sizes2: ("x-large": 30px, "xx-large": 36px);
   map.merge($font-sizes, $font-sizes2);
   
   // result: "small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px
   

5. map.remove
   1. map에서 지정 key를 제거

   **map.remove(<map1>, <key1>, ...);**
   
   $fonts-sizes: ("small": 18px, "normal": 18px, "large":24px);
   map.remove($font-sizes, "small". "large");
   
   // result: ("normal": 18px)
   

6. map.value
   1. map 안의 모든 값 리스트를 반환

   **map.value(<map>);**
   
   $font-sizes: ("small":12px, "normal":18px, "large":24px);
   map.value($font-sizes);
   
   // result: 12px, 18px, 24px
   

Mixin

• 코드 재사용을 위해 만들어진 기능 (반복되는 코드를 묶어놓은 것)
• @mixin, @include