이번 포스트부터 SCSS
의 문법에 대해서 다루도록 하겠습니다. 진행을 하다가 SASS
와 다른 부분이 존재하는 문법에 대해서는 차이점도 함께 소개하려고 합니다.
SASS
가 따로 언급되는 경우SCSS
와 문법적인 차이를 보이는 경우이고,SCSS
만 언급되는 문법의 경우에는 두 전처리기의 문법 사용에 차이가 없는 경우입니다.
먼저 SCSS
에서 주석을 다는 방법은 CSS
에서 주석을 다는 방식과 동일하게 /* */
를 이용합니다.
/*
SCSS는 기존 CSS와 동일한 방식으로
주석을 달 수 있습니다.
*/
SASS
에서는 주석을 달 때 각 줄 앞에 *
를 붙여주어야한다는 차이점이 있습니다.
/*
* SASS에서는
* 각 줄의 맨 앞에 *을 붙여야 합니다.
*/
SASS
, SCSS
는 몇가지 자료형들을 지원하고 있기에 속성값으로 사용할 수 있습니다.
자료형 | 설명 |
---|---|
Numbers | 숫자 타입입니다. |
Strings | 문자열 타입입니다. 특이하게 따옴표 " 를 사용해도 되고 사용하지 않아도 됩니다. |
Nulls | null 값을 넣을 수 있습니다. null값을 속성값으로 사용하면 해당 코드를 컴파일하지 않습니다. |
Boolean | 논리형 타입입니다. |
Color | 색상 표기를 위한 타입입니다. 이름표기, 16진수, rgb(rgba)방식을 사용할 수 있습니다. |
Lists | 값의 목록들을 나타낼 수 있는 타입입니다. |
Maps | 키:값 쌍의 값의 집합 타입입니다. |
Lists
타입은 익숙하지 않을 수도 있는데요. 일종의 배열이라고 보시면 됩니다. 여러 데이터들을 갖는데 이들은 내부의 데이터들을 쉼표,
혹은 공백으로 구분하며, 값의 목록들을 소괄호()
를 이용합니다. 이때 소괄호는 선택사항입니다.
(data1, data2, data3, data4)
/* 또는 */
data1 data2 data3 data4
Maps
타입은 Lists
처럼 여러 데이터들을 갖는 데이터입니다. 다만 내부가 키:값
의 쌍으로 이루어져 집합의 형태를 띄고 있다는 것이 특징입니다. 표현할 때 소괄호()
를 이용합니다.
(key1: value1, key2: value2, key3: value3)
SCSS
에서는 변수를 사용할 수 있습니다. 변수를 사용해서 반복되어 사용되는 값들을 편하게 이용할 수 있습니다. 변수의 이름 앞에 $
를 붙여서 사용합니다.
$변수명: 속성값;
/*
예를들어 다음과 같이 사용할 수 있습니다.
*/
$red-color: #ff0000;
h1 {
background-color: $red-color;
}
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