SCSS_개념

// Syntactically Awesome Style Sheets 의 약자로 '문법적으로 멋진 스타일 시트'

- css 전처리기
- 코드의 재활용성을 높여줌
- 코드의 가독성을 높여줘 유지보수의 용이성을 높여줌
- 추후 관리 위해 scss와 css 파일은 폴더로 구분 지어주는 것이 좋음
- 모든 작업이 끝날 때까지 종료하면 안 됨
- 반복문 / each / for / 조건문 / 변수 / 매개변수 / 연산 가능
- 변환하는 파일: 컴파일(무료: 코알라, 유료) >> css로 변환해줌
- scss와 sass는 다름!

 

// Koala(코알라) 설정 
source map: css와 연결시켜주는 코드
autoprefix: webkit 접두사 자동 생성
output style: compact(선택자 달라질 때마다 줄내림)

*오류 떴을 때: github.com/oklai/koala/issues/696 참고!

**UTF-8 관련 오류떠서 제어판-시스템언어-유니코드사용 체크함

 

// scss 연결 방법

1. scss 폴더 생성 - index.scss 파일 생성

2. koala 실행 - scss 파일 comfile(연결)

3. scss 폴더 안에 index.css 파일 생성 확인

/* sourceMappingURL=index.css.map */ scss와 css 연결하는 코드

4. scss에 코드 입력시 생성된 css에도 똑같이 적용됨

 

// 한줄주석(scss 주석)
/*여러줄 주석(scss, css 주석)*/

 

 

p.s - 유튜브 리베하얀 영상 참고