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

지난번 sass설치 포스팅이후 오랜만이네요 ^^;; 

사실 포스팅중 오류가 생겨 해결하다가 귀차니즘병이 걸려서 이제서야 돌아왔습니다.. 

더욱 성실한 쏭이가 되겠습니다! ㅎㅎ 

sass설치를 아직 안하신 분들은 설치를 하고 와주세요! ↓

http://jamanbbo.tistory.com/2

설치를 다 하셨다면 최상위 sass 폴더 아래에 gulpfile.js 폴더를 만들어줍니다

gulpfile.js 폴더에서는 gulp를 실행해서 sass를 사용하기 위한 셋팅을 하게 됩니다.

gulpfile.js

+서브라임 텍스트였던 에디터를 visual studio code 에디터로 변경했습니다.

중간중간 코드에 대한 주석을 달아놓았지만 자세히는 작성하지 않았습니다.

궁금하신 부분이 있으면 댓글로 남겨주시고 주석에대한 피드백은 환영합니다^^! 

아직 부족한게 많습니다 ㅎㅎ..

이렇게 코드를 작성해주시고 cmd 창에서 sass폴더로 이동 후,

gulp

명령어를 입력합니다.

에러가 뜨지 않고 실행이 잘 되면 sass를 사용할 수 있습니다!

sass가 잘되는지 실행을 해봅시다.

먼저 간단하게 파일,폴더 셋팅을 해줍니다. 

public/ index.html 파일 생성 후 src/dist/css/style.css 를 불러옵니다.

src/dist/ css 폴더 생성 : css 폴더 안에는 scss가 변환된 css 파일이 자동으로 생성됩니다.(style.css)

src/sass/ style.scss 파일 생성 : sass 폴더 안에있는 모든 scss 파일을 import하여 조합(?)하게 됩니다.

src/sass/**/*.scss 파일 생성 : 폴더나 파일 명은 마음대로 만들어도 되지만 scss 파일 앞에는 _ (언더바) 을 넣어줘야 합니다 예) _variable.scss 

이후 sass 폴더 안에 scss 문법에 맞게 코딩을 하면 gulp가 실시간으로 dist/css 안에있는 style.css 파일로 compile을 해줍니다.

(gulp를 실행시켜야  compile이 됩니다)

scss 문법에 맞게 코드 작성

-  css로 변환된 파일 

이로서 sass 사용해보기 포스팅은 끝입니다!

더 궁금한 부분들이 있으신 분들은 댓글 남겨주세요.

첫 포스팅이라 많이 서툴고 틀린 부분도 많을 것 같습니다.

저도 sass 배운지 얼마 안되서 지금도 공부하고 있습니다 ㅎㅎ 

피드백은 정말 정말 환영합니다!