Sass @ 가져 오기 규칙 및 이름 지정

Question

나는 sass 파일을 가져 오는 것에 관한 많은 기사를 읽었지만 그 주위에 머리를 감싸고있는 것처럼 보일 수 없다. 그것을하는 많은 다른 방법이있는 것처럼 보입니다.

나는이처럼 보이는 친구들 설정 복사 시도 :

global 
- style.scss 

Components 
- buttons.scss 
- colors.scss 
- fonts.scss 
- etc. 

Utils 
- normalize.scss 

는 그래서이 내 설정이라고 할 수있다. 어떤 사람들은 각 scss 파일에 밑줄을 붙여야한다고 말합니다 : _buttons.scss 다른 사람들은하지 말아야합니다.

내 style.scss에서 근무하는 경우 항상 완료 한 것처럼 import url("components.buttons.scss")을 사용해야합니다. 내가 뭔가를 놓치지 않는다면이 설정과 일반적인 CSS 설정의 차이는 무엇입니까?

Answer 1

을 다음과 같이 밑줄은 일반적으로는 아무튼 때문에 @import 에드되고하고 파일을 이해 것을 의미와

<pre>stylesheets/ 
 
| 
 
|-- modules/    # Common modules 
 
| |-- _all.scss   # Include to get all modules 
 
| |-- _utility.scss  # Module name 
 
| |-- _colors.scss  # Etc... 
 
| ... 
 
| 
 
|-- partials/    # Partials 
 
| |-- _base.sass  # imports for all mixins + global project variables 
 
| |-- _buttons.scss  # buttons 
 
| |-- _figures.scss  # figures 
 
| |-- _grids.scss  # grids 
 
| |-- _typography.scss # typography 
 
| |-- _reset.scss  # reset 
 
| ... 
 
| 
 
|-- vendor/    # CSS or Sass from other projects 
 
| |-- _colorpicker.scss 
 
| |-- _jquery.ui.core.scss 
 
| ... 
 
| 
 
`-- main.scss   # primary Sass file 
 
</pre>

차 말대꾸 파일이있을 것입니다 독립형 파일로 컴파일 될 필요는 없습니다. (빌드되지 않을 수도 있습니다!) 이것은 빌드 시스템과 sass가 어떻게 c 처음에는 편재되었다.

stylesheets/ 
    _reset.scss 
    _fonts.scss 
    _header.scss 
    contact-page.scss 
    style.css 

style.scss이 포함되어있을 경우 :

@import 'reset.scss'; 
@import 'fonts.scss'; 
@import 'header.scss'; 

(말대꾸로 가져올 때 당신이 필요는 없습니다 the command line에서 말대꾸를 사용

, 당신은이 파일 세트 다음 한 말 밑줄 포함)

컴파일 후 새 stylesheets/ 디렉토리에는 style.css a 만 포함됩니다. nd contact-page.css 및 style.scss은 reset, fonts 및 header의 모든 내용을 포함합니다. 밑줄 표시된 파일은 컴파일되지 않습니다.

당신이 reset.scss로 _reset.scss의 이름을 변경한다면, 그것은 reset.css에 컴파일,하지만 당신은뿐만 아니라 그것을 수입하고 있기 때문에 그 내용도 style.css에 포함된다.

그래서 : 파일 자체가 필요하지 않고 다른 파일에 @import을 입력하면 파일 이름에 밑줄을 사용하십시오.

Answer 2

이것은 우리가 새스 프로젝트를 구성하는 방법입니다. 당신의 말대꾸 파일 이름 지정

// Modules and Variables 
@import "partials/base"; 

// Partials 
@import "partials/reset"; 
@import "partials/typography"; 
@import "partials/buttons"; 
@import "partials/figures"; 
@import "partials/grids"; 

// Third-party 
@import "vendor/colorpicker"; 
@import "vendor/jquery.ui.core"; 

more info

Answer 3

파일 이름의 시작 부분에 밑줄을 추가하면 Sass가 해당 파일을 컴파일하지 않습니다. 따라서 colors.scss을 colors.css으로 컴파일하지 않으려면 대신 파일 이름을 _colors.scss으로 지정하십시오. 이 방법으로 명명 된 파일을 Sass 용어로 partials라고 부릅니다.

자세한 내용은 here을 참조하십시오.