Skip to content
On this page

Sass comment data type

Title
Sass comment data type
Category
CSS
Tags
Aliases
Sass comment data type
Created
4 years ago
Updated
last year

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

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

주석(Comment)

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와 호환이 쉽다.
*/

데이터 타입(Data Types)

데이터설명예시
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
MapsLists와 유사하나 값이 Key: Value 형태(apple: a, orange: o, banana: b)

데이터 타입들의 특이사항

  • Numbers : 숫자에는 단위가 있을 수도 있고 없을 수도 있다.

  • Strings : 문자에 따옴표가 있을 수도 있고 없을 수도 있다.

  • Nulls : 속성 값에 null 이 사용된 경우 해당 속성을 컴파일하지 않는다.

  • Lists : () 를 붙여도 되고 안붙여도 된다.

  • Maps : () 를 꼭 붙여야 한다.

Reference

패스트캠퍼스 - 프론트엔드 개발 강의 - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong

Sass(SCSS) 완전 정복!

Released under the MIT License.