이번 포스트부터 SCSS의 문법에 대해서 다루도록 하겠습니다. 진행을 하다가 SASS와 다른 부분이 존재하는 문법에 대해서는 차이점도 함께 소개하려고 합니다.

SASS가 따로 언급되는 경우 SCSS와 문법적인 차이를 보이는 경우이고, SCSS만 언급되는 문법의 경우에는 두 전처리기의 문법 사용에 차이가 없는 경우입니다.

주석

먼저 SCSS에서 주석을 다는 방법은 CSS에서 주석을 다는 방식과 동일하게 /* */를 이용합니다.

/*
  SCSS는 기존 CSS와 동일한 방식으로
  주석을 달 수 있습니다.
*/

SASS에서는 주석을 달 때 각 줄 앞에 *를 붙여주어야한다는 차이점이 있습니다.

/*
*  SASS에서는
* 각 줄의 맨 앞에 *을 붙여야 합니다.
*/

SCSS의 자료형

SASS, SCSS는 몇가지 자료형들을 지원하고 있기에 속성값으로 사용할 수 있습니다.

자료형	설명
Numbers	숫자 타입입니다.
Strings	문자열 타입입니다. 특이하게 따옴표"를 사용해도 되고 사용하지 않아도 됩니다.
Nulls	null 값을 넣을 수 있습니다. null값을 속성값으로 사용하면 해당 코드를 컴파일하지 않습니다.
Boolean	논리형 타입입니다.
Color	색상 표기를 위한 타입입니다. 이름표기, 16진수, rgb(rgba)방식을 사용할 수 있습니다.
Lists	값의 목록들을 나타낼 수 있는 타입입니다.
Maps	키:값쌍의 값의 집합 타입입니다.

Lists 타입

Lists 타입은 익숙하지 않을 수도 있는데요. 일종의 배열이라고 보시면 됩니다. 여러 데이터들을 갖는데 이들은 내부의 데이터들을 쉼표, 혹은 공백으로 구분하며, 값의 목록들을 소괄호()를 이용합니다. 이때 소괄호는 선택사항입니다.

(data1, data2, data3, data4)

/* 또는 */

data1 data2 data3 data4

Maps 타입

Maps 타입은 Lists처럼 여러 데이터들을 갖는 데이터입니다. 다만 내부가 키:값의 쌍으로 이루어져 집합의 형태를 띄고 있다는 것이 특징입니다. 표현할 때 소괄호()를 이용합니다.

(key1: value1, key2: value2, key3: value3)

---

변수

SCSS에서는 변수를 사용할 수 있습니다. 변수를 사용해서 반복되어 사용되는 값들을 편하게 이용할 수 있습니다. 변수의 이름 앞에 $를 붙여서 사용합니다.

$변수명: 속성값;

/*
 예를들어 다음과 같이 사용할 수 있습니다.
*/
$red-color: #ff0000;

h1 {
  background-color: $red-color;
}

SCSS의 변수 스코프

SCSS의 변수에도 스코프가 존재합니다. SCSS 변수의 스코프는 선언된 블록{} 내부에서만 유효한 스코프 범위를 갖습니다.

.scope1 {
  $red-color: #ff0000;
  background-color: $red-color;
}

/*아래는 에러!(스코프 범위를 벗어남)*/
.scope2 {
  background-color: $red-color;
}

변수 선언시 !global을 붙여주면 변수의 스코프를 전역으로 확장시킬 수 있습니다.

.scope1 {
  $red-color: #ff0000 !global;
  background-color: $red-color;
}

.scope2 {
  background-color: $red-color;
}

또한 전역 변수 선언시 같은 이름의 변수가 존재하면 나중에 오는 변수의 값으로 덮여쓰여집니다.

.scope1 {
  $color: #ff0000 !global;
  background-color: $color;  /*결과: #ff0000*/
}

.scope2 {
  background-color: $color;  /*결과: #ff0000*/
}

.scope3 {
  $color: #0000ff;
  background-color: $color;  /*결과: #0000ff*/
}

변수의 초기값

!default를 이용하면 변수에 할당해놓은 초기값을 사용하게 됩니다.

h1 {
  $red-color: #ff0000;
  background-color: #ffff00 !default;
}

/*
  위 코드의 컴파일 결과는 'background-color: #ff0000'가 됩니다.
*/

변수 삽입

#{}의 중괄호 사이에 변수명을 넣으면 문자열이나 SCSS 코드 중간에 변수 값을 넣을 수 있습니다.

변수의 재할당

SCSS의 변수는 다른 변수에 값으로 재할당이 가능합니다.

h1 {
  $red-color: #ff0000;
  $reeeeed: $ref-color;
  
  background-color: $reeeeed;
}
``1