1. 데이터 종류

- number - 숫자 (단위가 있거나 없음)
ex) 1, 2em, 3px, ...

- string - 문자 (따옴표가 있거나 없음)
ex) bold, relative, './img/', ...

- color - 색
ex) red, yellow, #aabbcc, #fff, ...

- boolean - true, false

- null - null (속성값이 null이면 컴파일하지 않음)

- list - 공백이나 ','로 구분되어있는 데이터 목록(배열과 비슷, ()생략 가능)
ex) (apple, orange), apple orange

- map - key와 value를 갖는 데이터 목록(객체 형태, () 필수)
ex) (apple: a, orange: o)

2. 변수

변수

$변수명: 속성값;

$w: 100px;
$h: 50px;

.test{
    width: $w;
    height: $h;
}

변수 유효범위

변수는 선언된 블록 내에서만 사용가능
아래는 잘못된 방법

.test1{
    $w: 100px;
}
.test2{
    width: $w;
}

변수 재할당

선언된 변수를 다른 변수에 재할당 가능

$color: red;
$red-color: $color;

.test1{
    $w: $red-color;
}

변수 전역 설정(!global)

변수를 선언하고 값을 할당한 후 !global을 붙이면 블록내에서 정의했어도 전역에서 사용가능한 변수가 됨

.test1{
    $color: red !global;
}

.test2{
    color: $color;
}

변수 초기값 설정(!default)

변수에 값을 할당할 때 기존에 정의되어 있던 변수가 있으면 기존의 값을 사용하겠다는 의미

$color: blue;

.test1{
    $color: red !default;
}

보간

문자열 중간에 {$변수명}을 넣어서 사용할 수 있음

$url: unquote("google");
@import url("http://{$url}.com");

3. 연산

기본 연산자

- +: 더하기
- -: 배기
- *: 곱하기 (하나 이상의 값이 반드시 숫자)
ex) 10px * 10 (O), 10px * 10px (X)
- /: 나누기 (나누는 값이 반드시 숫자)
ex) 10px / 10 (O), 10px / 10px (X)
- %: 나머지

비교 연산자

- ==: 값이 같음
- !=: 값이 다름
- > : 왼쪽이 큼
- < : 오른쪽이 큼
- >=: 왼쪽이 크거나 같음
- <=: 오른쪽이 크거나 같음

논리 연산자

- and: 그리고
- or:  또는
- not: 부정

문자 연산

문자열을 연결할 때 '+' 사용

'hello ' + world => 'hello world

색 연산

#123456 + #123456

// 위와 아래는 같은 값

#2468ac

rgba(10, 20, 30, 0.5) + rgba(10, 20, 30, 0.5)

// 위와 아래는 같은 값

rgba(20, 40, 60, 0.5)	// opacity 값이 같아야 함

$color: rgba(10, 20, 30, 0.5);

div{
    color: opacify($color, 0.3);		// 더 불투명하게
    background: transparentize($color, 0.2);	// 더 투명하게
}

// 위와 아래는 같은 표현

div{
    color: rgba(10, 20, 30, 0.8);
    background: rgba(10, 20, 30, 0.3);;
}