SCSS에서 파일 이름 앞에 '_'가 추가되는 이유는 무엇입니까?

SCSS를 사용하면 개발자가 CSS를 보다 구조화된 방식으로 작성할 수 있습니다. 또한 SCSS를 사용하는 동안 CSS용 파일을 여러 개 만들고 필요한 파일을 기본 SCSS 파일로 가져올 수 있습니다.

이 튜토리얼에서는 SCSS에서 파일 이름 앞에 "_"를 추가하는 목표를 살펴보겠습니다.

SCSS에서 파일명 앞에 "_"를 붙여야 하는 경우는 언제인가요?

SCSS에서 파일 이름 앞에 -_'를 추가할 때마다 컴파일러는 SCSS를 컴파일하는 동안 해당 파일을 무시합니다. 파일 이름이 "_" 문자로 시작하면 해당 파일은 부분 파일이 됩니다.

예를 들어 "style.scss"와 "_partial.scss"라는 두 개의 파일이 있습니다. 컴파일러는 style.scss 파일만 컴파일하고 _partial.scss 파일은 무시합니다. 그러나 _partial.scss 파일의 CSS를 사용해야 하는 경우 style.scss 파일로 가져올 수 있습니다.

예

아래 예는 HTML과 함께 SCSS를 사용하는 방법을 보여줍니다.

파일 이름 – 데모.html

SCSS 컴파일러에서 생성된 "" 태그를 사용하여 아래 파일에 "style.css" 파일을 추가했습니다. 출력에서 사용자는 CSS가 div 요소의 텍스트에 적용되고 텍스트가 이탤릭체로 표시되는 것을 확인할 수 있습니다.

으아악

파일 이름 – style.scss

아래 파일에는 글꼴 크기와 스타일을 저장하는 변수를 만들었습니다. 그런 다음 변수를 사용하여 div 요소의 스타일을 지정합니다.

으아악

파일 이름 – style.css

style.scss 파일을 컴파일할 때마다 html 파일에서 사용할 다음 코드가 생성됩니다.

으아악

예

으아악

예

이 예에서는 파일 이름 앞에 "_"를 추가하는 방법과 기본 CSS 파일에서 해당 CSS를 사용하는 방법을 보여줍니다.

파일 이름 – 데모.html

아래 파일에는 간단한 HTML 코드가 포함되어 있으며

태그 내에 "style.css" 파일이 포함되어 있습니다. 으아악

파일 이름 - _partial.css

사용자는 파일 이름 앞에 "_"가 붙은 _partial.scss 파일을 만들어야 합니다. 그런 다음 사용자는 파일에 다음 코드를 추가해야 합니다. SCSS 코드를 컴파일할 때 컴파일러는 이 파일의 코드를 무시합니다

으아악

파일 이름 – style.scss

이제 사용자는 메인 CSS 파일인 style.scss 파일에 다음 코드를 추가해야 합니다. 아래 코드에서는 "_partial.css" 파일에서 CSS를 가져왔습니다. 이 방법으로 파일 일부의 코드를 사용할 수 있습니다.

으아악

파일 이름 – style.css

style.scss 파일을 컴파일할 때마다 style.css 파일이 자동으로 생성됩니다.

으아악

예

으아악

SCSS에서 파일 이름 앞에 "_"를 삽입하는 주요 동기는 컴파일러가 무시할 수 있도록 파일을 부분화하기 위한 것입니다. 부분 파일의 CSS를 사용해야 할 때마다 이를 기본 파일로 가져올 수 있습니다.

부분 파일을 사용하면 중복된 코드를 작성할 필요가 없어 더 명확해진다는 주요 이점이 있습니다. 예를 들어 CSS의 다양한 부분에 대해 다양한 부분 파일을 추가하고 필요할 때 사용할 수 있습니다.

위 내용은 SCSS에서 파일 이름 앞에 '_'가 추가되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!