Sass
06. Live Sass Compiler
js0616
2024. 8. 21. 02:27
보통 html 과 css 를 작성하고 저장하면 반영이되는데,
scss 는 컴파일을 거쳐야하기 때문에 이를 확인하려면 컴파일을 수행해야되는 번거로움 이 있다.
색깔 하나 바꿀때마다 컴파일해서 확인할 수는 없지않나....
' Live Sass Compiler' 확장프로그램을 설치하여 이러한 문제를 완화 할 수 있을듯 하다.
확장 프로그램에서 Live Sass Compiler 를 검색,
줄이 안그어진 최신버전을 설치
폴더 구조 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
안녕, Live Sass Compiler
</body>
</html>
// src/sass/main.scss
@import "./partials/var";
@import "./partials/body";
// src/sass/partials/_vars.scss
$font_color: red;
$font_family: Arial, sans-serif;
$font_size: 32px;
// src/sass/partials/_body.scss
body {
color: $font_color ;
// Property Nesting
font: {
size: $font_size;
family: $font_family;
}
}
setting.json 을 열어서
"liveSassCompile.settings.generateMap": false, // Sass 컴파일 시 .map 파일(소스 맵) 생성을 비활성화합니다.
"liveSassCompile.settings.formats": [ // Sass 파일을 컴파일할 형식과 경로를 설정합니다.
{
"format": "expanded", // 컴파일된 CSS 파일의 포맷을 'expanded'로 설정합니다. (문서가 들여쓰기로 정렬됨)
"extensionName": ".css", // 컴파일된 파일의 확장자를 .css로 설정합니다.
"savePath": "/src/css" // 컴파일된 CSS 파일이 저장될 경로를 설정합니다. (프로젝트의 root 디렉토리 기준)
}
],
"liveServer.settings.donotShowInfoMsg": true // Live Server에서 정보 메시지(알림)를 표시하지 않도록 설정합니다.
주석 없는 코드
{
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/src/css"
}
],
"liveServer.settings.donotShowInfoMsg": true
}
터미널 하단 부분 클릭
다음과 같이 main.css 가 생성됨.
css 파일을 연결해준다.
<link rel="stylesheet" href='./css/main.css'/>
장점으로는 이제 scss 를 수정하고 저장하면 바로바로 css로 만들어준다는것
// src/sass/partials/_vars.scss
$font_color: blue;
$font_family: Arial, sans-serif;
$font_size: 32px;
font 색을 파란색으로 바꾸면 그게 바로 반영됨.!!
이제 기존의 css 를 작성하고 바로 확인하던 것처럼 scss를 작성 할 수 있음..
조금 의문이 남는 것은.. setting.json 에서 css 저장 경로를 지정하기 때문에,
프로젝트마다 비슷한? 구조를 가지게 해야되는걸까? 아니면 프로젝트마다 다른 setting.json 을 적용해야 되는걸까? ..
또한 webpack 을 사용한다면 해당 css 폴더는 들어가지 않도록 해야되지 않을까? ..
차라리 css가 src 밖에 저장되도록 해서 dev 용으로만 쓰도록 저장하는게 나을듯 ?
관련 출처