Sass
Syntactically Awesome Style Sheets
CSS 코드를 효율적으로 작성하기 위한 언어 -> CSS의 확장
- CSS의 단점 보완 : 코드수정 및 재사용 용이 (현대적인 CSS 확장언어)
- CSS 전 처리기 (Preprocessor) : CSS가 동작하기 전에 사용하는 기능
SCSS
CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 CSS의 상위집합(Superset)
CSS와 거의 같은 문법으로 Sass 기능을 지원한다.
Sass : 구문, 전처리기를 뜻하는 하나의 코딩언어
SCSS : 조금 더 CSS 친화적 (sass의 하위개념)
Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분 / SCSS는 {}로 범위를 구분컴파일
전처리기는 구문은 브라우저가 해석할 수 없기때문에 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)하는 과정이 필요하다.
Sass 동작
- sass 구문에 맞게 코드 작성
- sass 전처리기 (컴파일)
- 변환을 마치고, css 파일이 생성된다.
: Sass 작성 -> CSS 컴파일 -> 동작컴파일러
- visual studio code 확장기능
- node-sass
- SassMeister
https://www.sassmeister.com/
SassMeister
https://www.sassmeister.com/
SCSS를 통해 코딩한 작업을 컴파일이 완료된 CSS로 실시간으로 보여주는 사이트
visual studio code 확장기능
Live Sass Compiler(컴파일을 자동으로 해주는 플러그인) 설치후 상태 표시줄의 Watch Sass를 선택하면 자동 컴파일 생성
node-sass
node-sass는 Node.js를 컴파일러인 LibSass에 바인딩한 라이브러리
NPM으로 전역 설치하여 사용
*node.js : 명령행 인터페이스로 자바스크립트를 싱행하는 자바스크립트 실행환경
https://nodejs.org/ko/
node.js 환경에서 node-sass를 설치하여 진행😁
npm install -g sass
npm : 노드 패키지 매니저 (명령어)
-g : 전역에서 사용할 수 있도록 설치
sass --version
npm show sass version
sass 설치 확인하기위해 터미널에 sass 명령어를 입력했는데 자꾸 오류가 생겨서
npm 명령어를 통하여 sass의 버전을 확인했다😅
sass [옵션] <입력파일경로> [출력파일경로]
// sass style/main.scss style/main.css컴파일을 위한 파일 경로 설정
아직 이유를 확인하지는 못하였는데 sass 파일 경로를 설정하려니 에러가 발생했다.
sass : 이 시스템에서 스크립트를 실행할 수 없으므로 \npm\sass.ps1 파일을 로드할 수 없습니다해당 .ps1파일을 삭제하고 다시 명령어를 실행하니 정상적으로 컴파일되었다.
sass 명령어 옵션
--watch /-w : 라이브 모드 빌드
--style 변환스타일
sass 변환스타일
- nested : 중첩 스타일 (기본값)
- expanded : 확장 스타일(css와 거의 흡사)
- compact : 축약 스타일
- compressed : 압축 스타일 (불필요한 공백 모두제거)
sass 명령어 옵션 중복 사용가능
sass -w --style compressed style/main.scss style/main.css
sass 명령어 사용 전 주의사항
명령어를 실행시키려는 폴더와 터미널의 명령행 폴더가 같은지 확인하고 진행하기
특이사항
Sass에서 사용하는 데이터 종류 특이사항
- Numbers : 숫자에 단위가 있거나 없다.
- Strings : 문자에 따옴표가 있거나 없다.
- Nulls : 속성값으로 null이 사용되면 컴파일X
- Lists : ()를 붙이거나 붙이지 않음
- Maps : ()를 꼭 붙여야 함
