Sass

Sass (Syntactically Awesome Stylesheets)

Sass is a scripting language that is interpreted into CSS(Cascading Style Sheets).

참고 사이트

Sass 공식 사이트: http://sass-lang.com/
생활코딩: https://opentutorials.org/course/470/2489

준비과정:
1. ruby 설치 (Windows인 경우만) https://www.ruby-lang.org/en/downloads/
2. Sass 다운로드 & 설치
  - window에서 실행 -> cmd -> gem install sass 입력 후 엔터
  *루비가 잘 설치 되었는지 확인방법:
  실행(윈도우키+R) > cmd > ruby -v > 엔터 > 버전정보가 나오면 잘 설치한것

 *루비 update 방법
 커맨드라인에서 gem install rubygems-update

< SCSS 파일 만들기 >
사용방법 - 새로만들기
실행(윈도우키+R) > cmd > cd 프로젝트 폴더명
1. sass에 사용하겠다고 알리면, 변경사항을 자동으로 컴파일해줌
  (폴더연결) sass --watch .:.
  or
  (파일연결) sass --watch 파일명.scss:파일명.css

2. 파일 생성
  1번과 같은 위치에 '파일명.scss' 을 만들어준다.

3. 끝내기 (Ctrl+c)


< CSS로 변환하기 >
사용방법 - CSS로 한번에 모두 변환하고 원하는 폴더로 이동시키기
-폴더명에 있는 sass파일을 css로 모두 변환하고, 폴더명의 하위폴더인 complied로 이동해라
  sass --watch 폴더명/sass:폴더명/compiled


* CSS로 변환시, 표기 방법 4가지 *
1. nested
- 기본값이며, --style nested 생략 가능.
  sass 파일명.scss:파일명.css --style nested

2. expanded
- 계층구조이지만, 앞에 빈칸이 없음
  sass 파일명.scss:파일명.css --style expanded

3. compact
- 선택자의 기준으로 줄바꿈이 됨
  sass 파일명.scss:파일명.css --style compact

4. compressed
- 공백모두 제거 됨
sass 파일명.scss:파일명:css --style compressed

* sourceMappingURL=파일명.css.map 주석 달지 않게 하려면,
맨뒤에 --sourcemap=none 붙여주면됨


사용방법 - 기존css를 sass로 변경하기
1.Css 2 sass/scss converter 사이트로 접속(http://css2sass.herokuapp.com/)

2. css붙여넣기 -> convert 2 scss 클릭 (scss - css3 용, sass - 이전버전용)

기본 문법 (syntax): 

> 주석 처리 <

/* 여러줄 */

//한줄