SASS 데이터 타입(Data Type)

데이터 타입

테이터 타입(Data Type)은 데이터를

사용하기 위한 일종의 규칙입니다.

컴퓨터에서 데이터 타입은 0과1인

비트(bit)부터 시작하여 현실세계를

모델링한 객체 타입까지 무한대에

가깝게 만들어서 사용할 수 있습니다.

대부분 언어에서 사용하는 기본타입은

정수형, 부동소수점형, 문자형이 있습니다.

또 기본 타입을 조합해서 또 다른 타입을

만드는 구조체나 객체 타입도 많이 사용합니다.

SASS도 비슷한데 color 라는

데이터 타입도 있습니다.

프론트엔드는 디자인을 다루는 곳이니까

상당히 많이 사용하는게 color 입니다.

총 일곱 종류의 타입이 있습니다.

1. 문자열

2. 숫자형

3. Color

4. 리스트

5. 맵

6. bool

7. null

문자열(Strings)

문자열 타입은 상당히 많이 사용되고

내부적으로 복잡한 구조를 갖고 있습니다.

컴퓨터에서 볼 수 있는 모든 글자는

문자열이라고 할 수 있겠지요.

문자열은 정수같은 다른 기본형과는

차이가 있는데 그런 부분은 C언어와 같은

저수준 언어에 대한 설명이 필요합니다.

더 깊게 이야기하지는 않을 것이지만

컴퓨터에서의 문자열은 특별하다 -

정도의 개념이 있으면 충분합니다.

보통 문자열을 소스코드에서 표기할 때

" " 따옴표로 감싸는 형식을 사용합니다.

SASS에서는 꼭 따옴표로 감싸지 않아도 됩니다.

"some string"

'some string'

some string

이 세가지는 같은 문자열입니다.

*사용예

$font-name: 'D2Coding';
$custom-font-size: 1.2em;

.container {
    font-family: $font-name;
    font-size: $custom-font-size;
}

또 문자열은 + (concatenate) 연산자로

연결해서 문자열을 만드는게 가능합니다.

숫자(Numbers)

숫자를 모르는 사람은 없을 겁니다.

그런데 숫자형과 문자열의 차이를 설명하라면

그것은 생각보다 상당한 벽이 있습니다.

가장 큰 차이로는 숫자는 사칙연산이 가능합니다.

아래 예시는 컨테이너의 너비를 계산합니다.

$container-max-width: 700px;
$container-min-width: 100px;

.container {

    max-width: $container-max-width - 100px;
    min-width: $container-min-width + 250px;
}

그런데 여기서 px가 붙은 것은 문자열이 아닌가?

의문을 가질 수 있는데 숫자형입니다.

단지 SASS의 숫자형에는 특이하게

단위(unit)가 붙어 있습니다. C나 자바같은

일반 프로그래밍 언어를 하던 사람에게는

적응이 좀 안될지 모르지만 이는 웹문서에

사용되는 숫자에는 거의 단위가 붙어있어서

편리한 기능입니다. 폰트 사이즈가 18px 인데

18과 px를 따로 분리해서 취급하지는 않습니다

CSS에는 em rem px % 등 단위가 있는데

단위가 들어간 것들은 숫자형입니다.

아래 예시와 같이 em 단위에 숫자를 써서

곱하기 연산을 할 수 있습니다.

만약 연산의 단위가 잘못되면

컴파일러 오류가 납니다.

.9em * 1.2 는 가능하지만

.9em * 1em 은 불가능합니다.

수학이라면 .9em^2 가 나와야겠지요

상식적인 내용이긴 합니다만 혼동할 수 있습니다

$std-padding: .9em;

.container {
    padding: $std-padding * 1.2;
}

단위(unit)가 없는 숫자도 가능합니다.

정수형과 소수형이 가능합니다.

칼라(Colors)

칼라 타입은 좀 생소할 수 있는데

디자인을 표현하는 것이 중요한 웹에서

칼라는 항상 많이 사용되는 변수입니다.

칼라의 값은 몇가지 형태를 가집니다.

- rgb( )/ rgba( )

- hsl( )/hsla( )

- 16진수 표기 #XXX, #XXXXXX

- 영문 키워드 (red, blue 같은)

$color-1: brown;

$color-2: #FF2DDC

$color-3: rgba(0,0,255,0.5);

$color-4: rgba(0,255,0);

SASS에는 칼라를 조작하는 native

함수가 있습니다. 자세한 내용은

공식문서를 참조하도록 합니다.

background: lighten(red, 30%);

https://www.w3schools.com/sass/sass_functions_color.asp

https://sass-lang.com/documentation/modules/color

bool

불 타입은 bool, boolean 형이라고 합니다.

참과 거짓을 판단하는 타입이지요.

true와 false 값만 사용합니다.

소문자 true와 false convention을 따릅니다.

if 문을 사용할 때 필요합니다.

한가지 참고사항은 실제 거짓은 false와

null 밖에 없습니다. 나머지는 모두 true를

리턴합니다. 이것은 C언어 처럼 0은 거짓

0이 아닌 것은 참이라는 방식과 비슷합니다.

혼동을 피하기 위해 convention을

지킬 필요가 있습니다.

$highlight-line: true;

@if $highlight-line {
    .container-2::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: blue;
    }
}

*not 키워드도 있다. if not $bool 의 형식으로 사용.

not은 C의 !와 같은 반전의 의미임.

not true -> false

not false -> true

null

널(null)은 프로그래밍에서 전통적으로

사용하는 값으로 비어있는 값이나

아직 확정되지 않은 값을 표현할 때

사용합니다. 정수는 0으로 초기화할 수

있지만 객체타입 등 초기화가 어려운 경우

null로 상태를 표현하는 경우도 많습니다.

널값은 mixins 에서 유용하게 사용됩니다.

리스트(list)

리스트는 복합 자료형입니다.

여러개의 아이템을 묶는 용도로 사용합니다.

묶는 이유는 주로 루프(loop)를

돌리기 위해서입니다. loop에 대한 포스팅에서

더 자세하게 다루기로 하고 여기서는

형식을 알아보겠습니다.

$list-1: (1, 3, 5);
$list-2: (10, hello, 'world');
$list-3: (); // empty list
$list-4: hey guys; 
// list with no parentheses not recommended
$list-5: ('ice',); //a list

SASS에서 리스트를 만드는 규칙들은

파이썬 같은 인터프리터 언어와 비슷합니다.

권장되는 규칙은 ( ) 괄호와 , 콤마로

분리해주는 것 입니다.

예를 들어 $list: John Doe; 는 리스트지만

가독성이 명료하지 못합니다.

$list: ('John', 'Doe'); 이렇게 해주는게 좋습니다.

맵(maps)

맵은 키와 값(key and value) 방식의

자료타입으로 자바 등 많이 사용됩니다.

파이썬에는 dictionary라는 이름으로 불리지요.

맵(map) - 지도의 뜻 처럼 key에 value가

연결되어 있습니다. 어떤 value를 가져오려면

맞는 key를 사용하면 됩니다.

리스트는 순서가 있는 자료형인 반면

맵은 순서가 없다는 점도 차이입니다.

웹 프로그래밍을 해봤다면

맵의 형식은 많이 봤을 겁니다.

json 파일하고 닮았습니다.

가져오는 것은 map-get 함수로 가져옵니다.

$favorite-color: (
    'first' : red,
    'second' : blue,
    'third' : green,
);

.favorite-color { 
    color: map-get($favorite-color, 'third');
}

키가 꼭 문자열일 필요는 없고

다른 타입도 가능합니다(칼라타입도)

이것은 혼동의 여지가 있으니

키는 가급적 문자열을 권장합니다.

문법이 좋다고 너무 덕지덕지 써버리는게

그렇게 좋은 방법은 아닐 수 있습니다.

SASS 변수 - SASS 문법 1

SASS 문법(Syntax) SASS는 프론트엔드 전처리기이기도 하지만 자체의 문법이 있는 프로그래밍 언어입니다. 어떤 프로그래밍 언어를 배워도 처음에는 변수와 데이터 타입에 대해서 이야기합니다. 어

digiconfactory.tistory.com