[SASS]sass 설치,사용하기(1)

sass는 css를 확장하여 css작업의 생산성과 가독성을 높여줍니다. 

sass에 대해 좀 더 알고싶다면 > https://sass-guidelin.es/ko/

오늘은 같이 sass를 설치하고 사용해보도록 하겠습니다ㅎㅎ

sass의 문법은 브라우저가 읽지 못해서 따로 sass -> css 파일로 변환하는 과정이 필요합니다. 

변환은 웹팩,걸프,그런트 같은 빌드 시스템을 사용하게 됩니다.

저는 걸프를 사용해볼겁니다.

걸프를 사용하려면 node.js 를 먼저 설치해주어야 합니다.

 https://nodejs.org/ko/

 

설치를 한 후 cmd창을 열어서 node.js가 잘 설치 되었는지 확인해줍니다.

node -v

위의 명령어를 입력하고 에러문구가아닌 node.js의 버전이 나오면 설치가 잘 된겁니다 ㅎㅎ

npm도 잘 설치가 됬는지 확인해볼까요?

npm -v

마찬가지로 에러가 뜨지 않으면 설치가 잘 된겁니다.

npm은 node.js를 설치할때 자동으로 설치가되는 노드 패키지 매니저입니다. (node package manager)

바로 이 npm이 걸프를 사용할 수 있게 도와줄거에요.

이제 본격적으로 sass를 사용해보겠습니다. 

에디터를 킨 뒤, sass 프로젝트 폴더를 생성합니다.

저는 서브라임 텍스트 에디터를 사용했어요.

폴더를 셋팅해줍니다.

public 폴더 안에는 sass로 변환된 css를 넣은 index.html 파일이 만들어질거에요.

src폴더안에는 sass가 변환된 css파일을 저장할 dist라는 폴더와 sass파일을 저장할 sass폴더를 만듭니다.

이제 cmd창을 다시 켜주시고 sass폴더로 이동할게요.

npm init

위의 명령어를 칩니다. 프로젝트를 셋팅하게 될거에요.

이렇게 나오면 잘 된거에요!

제가 셋팅한 모습인데요.

입력할때 그냥 엔터 입력하시면 기본값이나 아무것도 없이 넘어가게됩니다. 가로안에 들어있는값이 기본값입니당.

저는 description 과 keyword만 설정을 하고 나머지는 기본으로 했어용.

license 까지 설정을 하게되면 밑에 제가 설정한 내용들이 출력이되고 폴더안에 package.json이라는 파일이 생길거에요!

짠 이렇게 폴더가 생겼어요

위에 제가 셋팅한 내용과 같은 내용이죠?

다시 cmd창에서 

npm install gulp gulp-sass gulp-sourcemaps --save-dev

걸프와 sass를 설치합니다.

-dev는 개발환경에서만 쓴다는 내용입니다.

실제 배포했을때 사용자가 sass를 설치해야되는건 아니잖아용?

만약에 사용자도 꼭꼭 필요하다! 하는 모듈은 -dev를 빼주고 설치를 해주면 됩니다.

이렇게 설치를 해줍니당.

모두 설치를 하고 다시 package.json 파일로 돌아가면 

이렇게 devDependencies 가 추가되고 그 안에는 설치한 항목들이 저장되어있습니다.

위에서 사용자들이 설치해야하는 모듈은 Dependencies로 추가가 됩니다.

자 이제 sass는 설치가 다 되었습니다. 이제 조금의 설정과 sass를 직접 사용해볼일만 남았네요!