가장 대중적으로 사용되고 저 역시도 사용하고있는 에디터인 비주얼 스튜디오 코드(vs code),
편리한 확장프로그램이 많아 편하게 사용하는 에디터입니다.
특히 vs code 에디터 내부에서 sass(scss)작업 및 컴파일까지 한번에 할 수 있는 방법이 존재하여 sass작업시에 매우 편리한 에디터라고 볼 수 있습니다.
(vs code가 기존에 다운받아져 있다는 가정하에 sass작성 환경만 세팅하겠습니다.)
1. VS CODE 확장프로그램 'SASS' 설치
2. SASS파일을 CSS파일로 컴파일 해주는 확장프로그램 'Live Sass Compiler' 설치
3. 확장프로그램 설치 후 VS CODE 우측 하단에 'Watch Sass' , 'Go Live' 가 보이는지 확인
- scss파일을 작업하실때는 저 두가지를 꼭 눌러주시고 작업하시면 됩니다.
* Sass 파일이 자동 컴파일된 css파일의 경로 지정
-vs코드 좌측상단의 파일-기본설정-설정 창을 여신 후 위 이미지의 경로대로 들어가신 후
-표시된 "savePath"의 값을 원하시는 경로로 수정해주시면 sass파일 저장시 지정해두신 경로로 자동 컴파일 됩니다.
*) 위 이미지의 "liveSassCompile.settings.generateMap": false, 로 설정을 해둬야 컴파일이 ".map" 파일을 생성하지않고 컴파일을 합니다.
반응형
'퍼블리셔 Note > CSS' 카테고리의 다른 글
| [CSS(animation)] 애니메이션 버튼 퍼지는 효과 구현 (0) | 2022.03.31 |
|---|---|
| [CSS] transform: translate(-50%, -50%) 사용시 이미지 깨짐,폰트 흐릿해짐 현상 (0) | 2022.03.28 |
| [CSS] position으로 가운데 정렬하기 (0) | 2022.03.28 |
| [CSS] 가로,세로 말 줄임표(...) 처리 (0) | 2022.01.14 |
| (CSS3-반응형) 종횡비값을 유지하며 background-image 표현하기 (0) | 2021.09.30 |