1. What is SASS?

SASS 는 Ruby로 쓰여졌다고 합니다.

SASS는 브라우저에서 인식안되니 CSS로 컨버전되어야 함.

SASS는 프로그래밍 랭귀지..

 

SASS 와 SCSS  http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax

SASS는 괄호와 세미콜론을 사용안하지만..  older syntax라고 하네요..

SASS(SCSS)를 배워야 되네요.. 

 

즉 확장자 .sass에 몇가지 문제점이 있어서 .scss로 넘어간것 같습니다. 

둘다 sass라고 합니다.

 

https://designmeme.github.io/ko/blog/write-sass-with-scss/

 

github code는 https://github.com/iamshaunjp/sass-playlist

 

2. Download & Compiling SASS

https://prepros.io/ 프리버전을 사용함.

prepros에서 Open Live Preview를 지원하니 일반 vscode를 사용해도 됨.

 

brackets에서도 지원 (레이아웃이 보여서 좋음)

 

koala http://koala-app.com/

 

커맨드 라인이 좋죠..

 

 

output style은 expanded 로 변경 (처음 설치시에는 nested로 나오는데 출력이 이상하게 나옴.)

 

3. SASS Variables

변수 설정

$[변수명]: [내용];

$deebBlue: #032f3e;

 

4. Nesting Styles

자손 선택자일 경우 CSS에서는  #main-nav ul{} 이나

SCSS에서는 그냥 중괄호안에 선언하면 자동으로..

#main-nav{

  ul{

  }

} 

[SASS] 는 들여쓰기로 괄호({})와 세미콜론(;)을 타이핑 안해도 되는 장점이.. 

그러나 emmet이 자동 추가기능등이 있어서 직관적으로 가는것이 더 좋을 것 같음.

#main-nav

  ul

    background

5. Mixins

재사용 가능한 CSS 모음

[SCSS]

@mixin [네임]{

  CSS코드 여기에

}

사용은

@include [네임];

[SASS]

=[네임]

사용은

+[네임]

 

SCSS가 좀더 직관적인것 같습니다.

 

6. Importing Files

@import "" 로 파일을 읽어옴.

모든 CSS 파일을 하나로 만들어서 처리함.