Sass(SCSS)?
Sass(SCSS)란 CSS작업의 한계를 개선하고 더욱 더 편리하게
CSS작업을 할 수 있도록 도와주는 전처리기다.
Sass(SCSS)코드를 작성하여 HTML 요소에 대한 스타일 코드를 작성하면
그 코드를 CSS파일로 컴파일을하고
그 컴파일한 CSS파일이 HTML에 적용되는 방식이다.
(Sass와 SCSS 둘 다 css 확장 스크립트 언어이다.
SCSS가 CSS와 문법 차이가 더 좁아 더 편리하게 사용할 수 있다고 한다.)
IntelliJ에서 SCSS사용하기
Sass(SCSS)를 사용하기 위해 먼저 node.js를 설치해야한다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
node.js설치 후 터미널을 열고
아래의 명령어를 실행하여 sass를 설치한다.
npm install -g node-sass
그 다음 IntelliJ -> Settings -> Plugins 에서 File Watchers 플러그인을 설치해준다.
File Watchers 플러그인을 설치하면 Sass(SCSS) 파일을 작성하면
자동으로 css파일로 컴파일 해줄 수 있도록 해준다.
그 후 Tools -> File Watchers 를 클릭하고 SCSS 템플릿을 추가하는데
다른 설정 수정 없이 Program 경로만 수정해주면 된다.
Programs의 파일 탐색기 버튼을 누르면 알아서 sass.cmd 파일 경로가 지정되어 있는데
이것을 선택해주면 된다.
세팅이 끝나고 프로젝트에 SCSS 파일을 추가를하면
위 사진처럼 .scss, .css, .css.map 세개의 파일이 추가된 것을 확인할 수 있다.
scss - 실제 scss문법으로 스타일 코드를 작성할 파일
css - scss파일에서 작성한 코드를 css형식으로 컴파일될 파일
css.map - 컴파일을 위해 scss와 css 파일을 연결해주는 역할
테스트 사용
이런 식으로 scss 문법으로 코드를 작성하면
자동으로 컴파일된 css파일을 볼 수 있다.
이 컴파일된 css파일을 웹에 적용시키는 것이다.
TIP
이런 식으로 영역별로 scss파일을 만들어 부분 별로 작업을 해도된다.
scss파일 하나당 하나의 css파일에 컴파일 할 필요는 없기 때문에 파일 이름 앞에 "_"를 넣었다.
(scss파일 이름 앞에 "_"문자를 넣으면 그 파일은 컴파일이 되지 않는다.)
그렇기 때문에 메인이 되는 scss파일에 @import문을 사용하여
다른 scss파일을 가져와 한번에 컴파일을 시켜준다.
이렇게 작업을 하게 되면 작업은 영역 별로 나눠 해당 파일만 작업 하고,
메인이 되는 하나의 scss파일만 컴파일할 수 있고,
그 컴파일된 하나의 css파일만 웹에 적용하면 되는 것이다.
이렇게 부분적으로 나눠서 작업하면 반응형 웹을 만들기에 적합할 것 같고
나중에 유지보수 하기에도 굉장히 좋을 것 같다.