sass를 사용할 때의 폴더 구성 예

sass 사용시의 폴더 구성의 이해가 얕다고 느꼈기 때문에, 구성예를 1개 이하에 기술해, 향후의 개발시의 참고 자료로 한다.

sass를 사용할 때의 폴더 구성 예

index.html

html을 설명하는 파일.
여기에 설명 된 내용이 실제로 브라우저에 표시됩니다.

style.css

html 파일에서 이 파일을 로드하여 스타일을 적용합니다.
style.css 파일을 직접 편집하는 대신 sass 명령을 실행하여 style.css 파일을 만들고 업데이트합니다.

stylesheets 폴더

모든 scss 파일을 관리하는 폴더.
새로 scss 파일을 만드는 경우도 모두 이 폴더의 하층에 만든다.

style.scss

하층의 scss 파일로부터 @import "URI 파일명"과 같은 형태로 호출 통합하는 파일.
예: @import "./reset.scss"

_reset.scss

브라우저에 표준으로 탑재된 CSS를 상쇄하기 위한 CSS 파일.
위 CSS가 구현하는 디자인에 간섭하는 것을 막는 역할이 있다.

config 폴더

프로젝트의 설정 파일이나, scss로 사용하는 변수를 정의하는 파일등을 관리하는 폴더.

mixin 폴더

mixin 폴더는 scss 내에서 사용할 mixin 파일을 관리하는 폴더입니다.

mixin이란?
@mixin スタイル名 에서 정의한 스타일@include スタイル名 그리고, 변수와 같이 호출할 수 있다고 하는 것.

modules 폴더

머리글, 바닥글 등 여러 요소에 대해 만든 scss를 관리하는 폴더입니다.
모듈을 사용하는 것으로 정리된 CSS를 독립한 것으로 관리할 수 있다.

vender 폴더

미리 CSS가 작성된 라이브러리 파일을 관리하는 폴더.
라이브러리를 효율적으로 이용하는 것으로, 코딩의 스피드가 현격히 오르는 것 같다.

override 폴더

override 폴더는 vendor 폴더에 저장된 외부 라이브러리를 덮어쓰기 위한 scss 파일을 관리하는 폴더입니다.

현재의 이해

·mixin·vender·override에 대한 이해가 얕아
어떻게 효과적으로 활용할 수 있는지 모르는 상태.

개인 앱 개발을 통해 이해를 깊게 해 나가고 싶다.