왜 scss / css에서 파일 이름“_”또는“_”앞에 두어야합니까?


147

_scss에서 파일 이름 앞에 넣습니까?

_filename.scss왜 필요한 _가요?

답변:


147

_ (밑줄)은 scss의 일부입니다. 즉, 스타일 시트를 기본 스타일 시트 (styles.scss)로 가져 오게됩니다 (@import). 부분 사용의 장점은 많은 파일을 사용하여 코드를 구성 할 수 있으며 모든 것이 단일 파일로 컴파일된다는 것입니다.


3
하지만 import '_file';import '_file';똑같은 권리를합니까?
tom10271

20
@aokaddaoc은 같은 코드 라인을 작성한 것 같습니다 :)
Amit

20
내 실수를 지적 해 주셔서 감사합니다. "하지만 import '_file';import 'file';똑같은 권리를합니까?"
tom10271 2018

5
컴파일러 / 전처리기로 단일 파일 만 보내는 방식으로 파일을 구성 할 경우 파일 앞에 붙일 경우 왜 문제가 _됩니까? 파일 이름에서 밑줄을 제거하는 것을 고려하고 있습니다. Sass 파일이 부분적인지 여부 (즉, 가져 오기 가능한 코드 조각)는 파일 이름 지정 방식이 아니라 프로젝트 아키텍처에서의 위치에 따라 달라집니다.
ESR

1
@ESR : 동의합니다.이 기능은 최신 웹 개발 환경에서는 약간 오래된 느낌입니다. _프로젝트를 합리적인 방식으로 구성했다면 반드시 s 가 필요하지 않습니다 .
Chris Jaynes

55

밑줄로 시작하는 sass 파일은 부분입니다. 스타일을 논리적 섹션으로 분리하는 것이 좋습니다. 이 파일은 모두 사용할 때 컴파일시 병합됩니다 @import.

Sass 언어 안내서에서 :

다른 Sass 파일에 포함 할 수있는 CSS 스 니펫이 거의없는 부분 Sass 파일을 만들 수 있습니다. 이는 CSS를 모듈화하고보다 쉽게 ​​유지 관리 할 수있는 좋은 방법입니다. 부분은 단순히 밑줄이 붙은 Sass 파일입니다. _partial.scss와 같은 이름을 지정할 수 있습니다. 밑줄은 파일이 부분 파일 일 뿐이며 CSS 파일로 생성되어서는 안된다는 것을 Sass에 알려줍니다. Sass 부분은 @import 지시문과 함께 사용됩니다.

http://sass-lang.com/guide


13

파일 이름 앞에 "_"를 포함하면 파일이 부분이 아닌 다른 sass 파일로 가져 오지 않으면 CSS로 생성되지 않습니다.

폴더 구조가 다음과 같다고 가정하십시오.

/scss
 style.scss
 _list.scss
/css

명령을 실행하면

sass --watch scss:css

style.css 및 style.css.map 파일 만 생성되며, sass 컴파일러는 내용을 CSS 파일로 변환하지 않고 _list.scss를 생략합니다.

/scss
 style.scss
 _list.scss
/css
 style.css
 style.css.map

부분을 ​​사용할 수있는 유일한 방법은 다음을 사용하여 부분을 다른 .scss 파일로 가져 오는 것입니다.

@import 'list.scss';

_list.scss 앞에서 '_'를 제거하면 명령의 결과는

/scss
 style.scss
 list.scss
/css
 style.css
 style.css.map
 list.css
 list.css.map

부분을 ​​사용하는 주요 목적은 CSS 코드를 유지하기 쉬운 여러 조각으로 나누는 것입니다. 도움이 되었기를 바랍니다. 감사.


2
이것이 정답입니다. 그러나, 당신은 또한 _index.scss의 특별한 경우를 언급하지 않았다 : sass-lang.com/documentation/at-rules/import#index-files을
tiffon

11

_ (밑줄)이있는 파일은 컴파일러에서 무시됩니다. 그러나 이러한 모든 파일은 실제로 컴파일 된 파일 인 단일 기본 SCSS 파일 (예 : styles.scss)로 가져옵니다 (이름에 _ (밑줄)이 없음)

최종 목표는 하나의 SCSS 파일 만 컴파일하고 그 결과 하나의 CSS 파일 만 갖도록하는 것인데, 이는 여러 가지 장점이 있습니다.


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.