퍼블리싱 아카이브

이번에는 확장 프로그램이 아닌 터미널을 통해 명령어를 입력해서 Sass를 실행시키는 방법을 공부해보겠다. 1. 환경설정(Settings) 1) node.js 홈페이지에 들어가서 LTS를 설치한다. 2) Terminal -> New Terminal을 클릭하고 명령어를 입력한다. node -v: 노드 설치 확인 npm install -g sass: 사스 설치 명령어 node -v는 node.js가 설치되었는지 확인하는 명령어로, 입력하면 현재 설치되어있는 노드의 버전이 출력된다. node -v로 노드가 설치되어있다는 것이 확인되었다면 다음에는 npm nstall -g sass를 입력해 sass를 설치한다. sass --version : sass의 버전을 확인할 수 있는 명령어 를 입력하면 sass가 잘 설치..

Sass를 사용하는 방법은 두가지가 있는데 첫번째는 vs code 설치 -> Live Sass Compiler 확장프로그램을 설치하는 방법이고 두번째는 vs code 터미널에서 명령어를 입력해 사용하는 방법이다. 두가지를 전부 해보겠다. ** 이 글은 이미 CSS와 VS Code에 익숙해지신 분들을 위한 글입니다. + 저를 위한 글 1. 환경설정(Setting) 1) VS Code 설치 (기본 Extension 설치는 https://liz52hz0322.tistory.com/43를 참고) 2) VS Code에서 Extensions -> Live Sass Compiler를 설치한다. 이제 보여드리겠음 얘가 을매나 편한 놈인지 2. 사용방법 1) index.html 파일과 style 폴더를 생성한 뒤 mai..

1. Sass(Syntactically Awesome StyleSheets) Sass는 CSS 코드를 효율적으로 작성하기 위해 사용하는 프로그래밍 언어이다. Sass는 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS 전처리기의 하나이다. 브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트 하는 과정을 거친다. 웹 업계에서 실제 많이 사용하는 전처리기이다. 2.Sass나 SCSS를 쓰는 이유 스타일시트가 점점 더 커지고 복잡해지며 유지관리가 어려워지고 있기 때문이다. Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에 없는 편의 긴으들이 있어 시간을 절약할 수 있다. 코드 재사용이 가능하다. 3. Sass가 이용되는 ..