Sass comment data type

Title

Sass(SCSS) Syntax - 1. 주석, 데이터 타입

❗️ 해당 글은 패스트캠퍼스 - 프론트엔드 개발 강의에서 HTML & CSS, SASS(SCSS) Part의 박영웅 강사님의 강의자료(Sass(SCSS) 완전 정복!)를 보며 정리한 것입니다.

CSS에서 주석은 /* 내용 */ 으로 작성했었다.

Sass(SCSS)는 JavaScript처럼 두 가지 종류의 주석을 사용할 수 있다.

// CSS로 컴파일되지 않는 주석
/* CSS로 컴파일되는 주석 */

// CSS로 컴파일되지 않는 주석
/* CSS로 컴파일되는 주석 */

Sass(SCSS)에만 남기고 싶은 주석은 // 로, CSS에도 남겨야되는 주석인 경우에는 /* */ 로 주석을 작성하면 된다.

또한 여러 줄 주석의 경우 Sass와 SCSS 간에 약간의 차이가 있다.

/* Sass에서는
 * 여러 줄의 주석을 사용할 때
 * 각 줄에 Asterisk를 사용해야하고,
 * 각 Asterisk의 라인을 맞춰줘야한다. */

/* 맞추지 않는 경우
* 에러가 발생하며
  * 컴파일되지 않는다. */

/* Sass에서는
 * 여러 줄의 주석을 사용할 때
 * 각 줄에 Asterisk를 사용해야하고,
 * 각 Asterisk의 라인을 맞춰줘야한다. */

/* 맞추지 않는 경우
* 에러가 발생하며
  * 컴파일되지 않는다. */

/*
scss에서는
여러 줄 주석에서
각 줄에 Asterisk가 없어도 문제되지 않아
CSS와 호환이 쉽다.
*/

/*
scss에서는
여러 줄 주석에서
각 줄에 Asterisk가 없어도 문제되지 않아
CSS와 호환이 쉽다.
*/

데이터	설명	예시
Numbers	숫자	1, .82, 20px, 2em…
Strings	문자	bold, relative, "/images/a.png", "dotum"
Colors	색상 표현	red, blue, `#FFFF00`, rgba(255,0,0,.5)
Booleans	논리	true, false
Nulls	아무것도 없음	null
Lists	공백이나 ,로 구분된 값의 목록	(apple, orange, banana), apple orange
Maps	Lists와 유사하나 값이 Key: Value 형태	(apple: a, orange: o, banana: b)