[SASS] css 전처리기 컴파일러 koala(코알라)
·
👩🏻‍💻STUDY/SASS
1. 코알라 다운 2. 코알라에서 + 를 누른 후 컴파일 할 scss파일을 선택한다. 3. 폴더 지정없이 진행하려면 6번부터 보면된다. 컴파일할 css 파일을 scss와 다른 경로에 저장하려면 여기서부터 보면됨. style.scss에서 우클릭 후, [set Output Path] 선택. 4. 3번에서 scss 파일을 선택하면 같은 경로에 css파일이 저장된다. 이 css 파일을 내가 넣을 폴더에 넣고 진행만 하면 된다. 5. 그럼 경로가 아래 이미지처럼 확인됨. 6. 컴파일 된 css를 어떻게 구조화할지 선택할 수 있다. (output style 선택) nested ul { font-family: Georgia; color: #333; } ul li { display: inlne-block; } exte..
[SCSS] vscode로 sass compiler하기
·
👩🏻‍💻STUDY/SASS
브라우저에서는 CSS만 인식한다. 그러므로 Sass는 서버에서만 확인이 가능하다. 그럼에도 Sass를 쓰는 이유는 표준css보다 많은 기능(변수, 조건문, 함수 등)을 사용해서 편리하게 작성할 수 있기 때문이다. Sass로 작성하고 css로 컴파일(compile)하여 동작시킨다. 브라우저에서는 [파일명.scss]를 인식하지 못하므로, [파일명.scss]를 [파일명.css]로 변환해주는 작업이 필요하다. Live server 를 다운받아 서버를 통해 본다. Sass 설치방법 node-sass ruby koala vscode 확장플러그인 설치 그중에서 가장 쉬운 vscode로 설치하는 방법을 알아보자. 1. 먼저 기본세팅. test.html 를 만들어 test.css의 링크를 걸어준다. // test.htm..