2. SCSS 사용 방법 - Basic settings

1. basic tree structure

scss ▸ css_name.scss

         ▸ _partial ▸ _scss_pieces.scss

                          ▸ _scss_pieces.scss

 

2. css_name.scss inner setting

@import "_partial/_scss_pieces.scss";

@import "_partial/_scss_pieces.scss";

@import "_partial/_scss_pieces.scss";

....

Description - pieces : 조각, 일부분, 파편

 

3. Practical Use Examples

scss ▸ css_name.scss

         ▸ _partial ▸ _button.scss

                          ▸ _common.scss

                          ▸ _fonts.scss

                          ▸ _footer.scss

                          ▸ _functions.scss

                          ▸ _header.scss

                          ▸ _icon.scss

                          ▸ _layout.scss

                          ▸ _mixin.scss

                          ▸ _reset.scss

                          ▸ _variables.scss

- 위의 _partial폴더 내의 10가지 scss파일중 반드시 상위에 적용되어야 하는 파일 : 

1) _functions.scss

2) _variables.scss

3) _mixin.scss

- 공통 영역에 해단 되는 scss 파일 :

1) _reset.scss

2) _fonts.scss

3) _common.scss

4) _header.scss

5) _footer.scss

** 공통 영역을 따로 분리하는 이유는 css파일을 css_name.css로 통합해서 사용될 수도 있으나 경우에 따라 위의 5가지를 따로 common.scss로 문리하여 common.css 또는 더 세분화 후 컴파일하여 사용될 수도 있기 떄문이다.

- 사용자 정의 scss 파일 :

1) _button.scss

2) _icon.scss

3) _layout.scss

** 사용자 정의 scss파일의 경우 사용 경우에 따라 table관련, component(input 등)와 그 외 여러가지로 분리될 수도 있다.

 

- css_name.scss settingfs

이 scss파일의 이름은 css에 자동으로 생성, 적용 된다.

- 파일 통합의 경우 css_name.scss code

@import "_partial/functionas.scss";

@import "_partial/variables.scss";

@import "_partial/mixin.scss";

@import "_partial/fonts.scss";

@import "_partial/reset.scss";

@import "_partial/icon.scss";

@import "_partial/button.scss";

@import "_partial/header.scss";

@import "_partial/footer.scss";

@import "_partial/common.scss";

@import "_partial/layout.scss";

 

- 파일을 분리할 경우 code

** 예) common.css파일과 layput.css 파일로 두개의 css파일로 분리 사용할 경우

css_name.scss파일이 있는 폴더에 css_name.scss 대신 common.scss파일과 layout.scss 파일 두개를 준비 한다.

 

1) common.scss

@import "_partial/functionas.scss";

@import "_partial/variables.scss";

@import "_partial/mixin.scss";

@import "_partial/fonts.scss";

@import "_partial/reset.scss";

@import "_partial/icon.scss";

@import "_partial/button.scss";

@import "_partial/header.scss";

@import "_partial/footer.scss";

@import "_partial/common.scss";

 

2) layout.scss

@import "_partial/functionas.scss";

@import "_partial/variables.scss";

@import "_partial/mixin.scss";

@import "_partial/layout.scss";

컴파일시 common.css파일과 layput.css 파일로 생성 또는 적용 되며 html상에 인클루드시 common.css파이리을 먼저 인클루드 한다.

아래쪽의 layout.css 파일에서 우선처리 해야 될 경우도 있기 떄문.