[basic] SCSS - Intro (소개)・Comments (주석)

목차

1. SASS 이해에 필요한 언어
2. SASS 정의
3. SASS 사용 이유
4. SASS 유용성 예제
5. SASS 작동 방식
6. SASS 파일 확장자
7. SASS 주석

SASS 이해에 필요한 언어

 

HTML , CSS

 

SASS 정의

※ SASS (Syntactically Awesome Styleheet)

 

CSS 확장이자, CSS 전처리기 일종.

 

---

 

1. CSS 모든 버전과 완벽 호환.
2. CSS 반복 줄여, 시간 절약.
3. 디자인: Hampton Catlin  / 개발: Natalie Weizenbaum (2006年)
4. 무료.

 

SASS 사용 이유

 

1. CSS 규모 거대화에 따른 (유지・보수) 어려움 해결 위해 등장.
2. CSS에 없는 다양한 기능을 활용 가능. (예) 변수, 안긴 형태, 믹스 인, 가져오기, 상속, 내장함수 등

 

SASS 유용성 예제

 

/* 변수 정의 */

$color_1: red;

$color_2: blue;

$color_3: pink;

/* 변수 사용 */

.header {

  background-color: $color_1;

}

.main {

  background-color: $color_2;

}

.footer {

  background-color: $color_3;

}

 

※ SASS 활용하면 변수 정의 부분에서 일괄 수정 가능.

SASS 작동 방식

 

브라우저가 SASS를 바로 이해하지 못 하므로,

SASS 전처리기로 (SASS → CSS) 변환 필요.

 

SASS 파일 확장자

 

.scss

 

SASS 주석

1. 여러 줄 주석:  /* 주석 내용 */
2. 한 줄 주석:  // 주석 내용

---

[예제]

 

/* 변수 정의 */

$color_1: #a2b9bc;

$color_2: #b2ad7f;

/* 변수 사용  */

.header {

  background-color: $color_1; // 배경색

}

 

주의: 한 줄 주석 ( // ) 경우, 순수 CSS 주석엔 없는 형태.