[SASS - SCSS] 2-4. 데이터 타입

4. 데이터타입

SASS Script는 7가지의 데이터 타입을 지원합니다. 데이터 타입은 아래와 같습니다.

 

1. 숫자형: number (ex: 1.2, 100, 150px)
2. 문자열: (ex: "SASS", 'SASS', SASS)
3. Color (ex: red, #999999, rgba(255, 255, 0, 0.5))
4. boolean (ex: true, false)
5. null (ex: null)
6. list: (ex: 1.5em 1em 0 2em, Noto Sans Arial, sans-serif)
7. maps: (ex: key1: value1, key2: value2)

 

그중에서도 데이터 타입에서 대표적인 내용들을 정리하였습니다.

 

1) 문자열

문자열은 SassScript에서는 일반 텍스트, 따옴표, 쌍 따옴표 모두 동일하게 취급합니다.

 

위의 코드처럼 따옴표의 유/무, 따옴표 or 쌍따옴표 기재에 따라서 그대로 결과값이 표시가 됩니다. 각각 기재를 한 후에 컴파일링해도 'Noto Sans', sans-serif 이렇게도 출력이 됩니다.

 

URL을 표시하는 경우에는 따옴표 또는 쌍따옴표를 표시하게 됩니다. 변수에 따옴표를 지우게 되면 box의 background 배경은 출력이 되지 않습니다.

 

따옴표를 작성하지 않는 것이 있는데, 예를 들어 font-family에서 'Noto Sans', sans-serif; 에서 sans-serif는 따옴표를 작성하지 않습니다. 작성하게 되면 작동하지 않을테고, CSS의 문자로 구성된 left, right, center 등 따옴표를 작성하지 않습니다.

---

2) 리스트

리스트는 배열을 의미합니다. CSS에서 margin, padding의 값처럼 top - right - bottom - left 순서로 방향을 지정해서 10px 7px 5px 15px과 같이 값을 배열하게 됩니다.

 

font 속성에서도 Helvetica, Arial, sans-serif 이런 식으로 순서대로 font 이름을 호출하여 배열합니다. 변수에도 이런 배열을 사용할 수 있습니다. 주의할 점은 null 값은 변수에 담을 수 없습니다. 

 

---

3) 맵스 Maps

맵스는 키값의 할당된 배열을 의미합니다. 맵스는 다음과 같이 키와 그 키의 값에 대한 배열을 지정하는 것 입니다.

 

breakpoints 변수에 iphone, ipad, desktop의 값을 각각 할당 한 후에, box1에서 width 값을 ipad 값을 가져오고 싶을 때는 map-get() 함수를 사용하여 가져올 수 있습니다. 여기서 주의해야 할 점은 각 키 값을 구분할 때는 ;세미콜론이 아닌 ,콤마로 구분을 하셔야 합니다.

---

4) 색상

CSS에서 사용되는 색상 코드는 SASS에서도 사용이 가능합니다. rgba 코드 값을 16진수로 표현하면 아주 편리하게 이용이 가능합니다. 위의 3번 코드 SASS 코드를 참고하시면 됩니다.