[SASS/SCSS] SASS란 무엇인가 / 실습환경

---

| SASS란 무엇인가

- Syntactically Awesome Stylesheets

- Sass는 CSS의 전처리기 

Sass, LESS, Stylus 와 같은 전처리기 언어 코드를 CSS코드로 변환해주는 프로그램

- 웹 프레임워크 플러그인을 이용하여 Sass문법을 CSS파일로 컴파일

---

| SASS 문법

- SCSS가 최신 문법 ( .scss 확장자 사용)

- 초기 Sass문법은 들여쓰기를 한다. (루비,파이선 사용했던 사람에겐 더 친숙)

/*SCSS*/
$pink: #cd6799;
div{
  border: 1px solid $pink;
  p{
    color: $pink;
  }
}

/*Sass문법*/
$pink: #cd6799;
div
  border: 1px solid $pink;
  p
    color: $pink;

---

그 외

| 캐스케이드 Cascade

CSS 선언 충돌을 피하기 위해 우선순위를 정한 것

 

| 실습환경

따로 실습환경 구축없이 JSFiddle 에서 테스트 가능

https://jsfiddle.net/

JSFiddle - Code Playground

 

---

참고책

웹디자이너를 위한 SASS