지난 강의를 들으며 scss에 대해 배웠지만, 쉽게 쓸 수 있는 방법이 아니었다... 하지만 확실히 scss를 활용하면 css를 단독으로 사용할 때보다 훨씬 효율적이고 직관적으로 구현할 수 있기에 사용하지 않을 수 없다!
구글링 결과, VSCode에서 scss를 구현하는 법은 그리 어렵지 않았다.
VSCode에서 SCSS를 쓰고 싶다면
0. SCSS가 무엇인가?
scss를 쓰기 전, scss가 뭔지, sass가 뭔지 정도는 얼추 알아야 할 것이다. sass는 stylus나 less와 더불어 css를 '전처리'하는 기능을 가진다. 웹에서 실질적으로 구현되는 것은 css 파일이고 위의 전처리기들이 css를 편리하게 작성하게 도와주는 역할을 하는 것이다.
scss는 sass의 친척과 같은데, 아주 조금 더 친근하다. 단순한 문법의 차이인데, scss는 css에서도 사용하는 {}와 ;를 가진다. 그래서 css를 먼저 배웠다면, scss의 문법으로 쓰는 것이 당연히 편하다.
SASS 예시
.hello
width: 100%
background-color: tomato
li
color: white
&:last-child
margin-bottom: 10px
같은 내용의 SCSS는
.hello {
width: 100%;
background-color: tomato;
li {
color: white;
&:hover {
text-decoration: underline;
}
}
}1. VSCode의 Extension Program인 'Live Sass Compiler' 설치
Live Sass Compiler는 sass/scss 파일을 작성하면 그를 바탕으로 css 파일을 만들어주는 컴파일러 역할을 한다. 설치가 완료되면 하단 바에 'Watch Sass'라는 버튼이 생길 것이다.
2. 사용 전 설정
Live Sass Compiler를 바로 사용하기 전에, 미리 해둘 설정들이 있다. 불필요한 파일을 형성하지 않게 하는 것, 그리고 css 파일이 형성되는 경로를 설정하는 것 두 가지다. VSCode의 설정(Ctrl/Command + ,)에 들어가 'Live Sass Compile'이라고 검색한다.
2-1. 불필요한 파일(.map)을 형성하지 않게 하는 것
이 설정을 하지 않으면, compiler가 scss 파일을 바탕으로 css 파일을 형성할 때, .map이라는 파일이 불필요하게 생성하게 된다. 하위 목록 중 'Generate Map'을 찾아 'Edit in settings.json'을 클릭한다. 그러면
"liveSassCompile.settings.generateMap": false라는 부분이 있을 것이고, 그 값을 false라고 확인/수정하면 된다.
2-2. css 파일이 형성되는 경로를 설정하는 것
나는 웹 구현을 할 때는 css 폴더를 따로 설정하고 있고, 아마 많은 사람들이 그럴 것이다. 따라서 그 위치에 css파일이 있어야지 보기에도 깔끔하고 html 파일과의 호환도 좋을 것이다. 이번에는 하위 목록 중 'Formats'를 찾아 역시 'Edit in settings.json'을 클릭한다.
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
}
]이 부분에서 "savePath"만 수정하면 된다. "~/../css"라고 하는 것은 상위 폴더로 가서 거기에 있는 css 폴더에 만들겠다는 뜻이다. (나는 scss 폴더 안에 scss 파일을 만들기에 상위로 올라가야 했다. 각자 사정에 따라 작성하도록)
"extensionName"은 확장자명이기에 건드리면 안 된다. "format"은 css 파일을 어떤 형태로 만들겠냐는 것이다. "compressed", "compact", "nested", "expanded" 4가지 종류가 있는데, 이 순서대로 css가 더 예뻐진다. ㅎㅎ Prettier를 사용했을 때의 모양과 가까워지는 것이다. 즉, 딱히 건드릴 필요 없다.
3. 직접 Compile 해보기
준비가 되었다면, scss 파일들을 열심히 만든다. 그리고 아래에 있는 'Watch Sass' 버튼을 누르면 'Watching'으로 바뀌며 Output 창이 뜰 것이다. 원하는 위치에 css 파일이 잘 형성되었는지 보고 html도 열어 확인해보자. (설마 html에 css link를 안 달지는 않았는지 확인해보자^^) 잘 되었다면 성공!
Watching이 지속되는 중에는 scss를 저장할 때마다 compiler가 수정사항을 반영한다. 만일 그만하고 싶으면, 하단의 'Watching' 버튼을 다시 누르면 된다.
4. scss 문법?
"_variable.scss", "_extends.scss", "_mixin.scss" 이 3개의 파일을 잘 쓸 줄 알아야 scss를 쓰는 의미가 있을 것이다. 이에 대해서는 이후 여유가 될 때 다시 정리해보겠다.
