SASS @import 함수의 용도는 무엇입니까?

SASS는 코드 중복을 허용하지 않아 CSS 코드를 건조하게 유지하는 CSS 전처리기입니다. SASS에는 다양한 지시문이 있으며 그 중 하나가 @import 지시문입니다.

'@import' 지시문은 '.scss' 또는 '.sass' 파일의 코드를 다른 파일로 가져와서 컴파일하는 동안 실행하는 데 사용됩니다. "@import" 지시문을 사용하여 한 파일에서 다른 파일로 변수, 함수, 믹스인 등을 가져올 수 있습니다.

문법

사용자는 SASS에서 '@import' 지시문을 사용하여 다음 구문에 따라 파일을 가져올 수 있습니다.

위 구문에서 'test.scss' 또는 'test.sass' 파일을 가져왔습니다. 여기서는 코드를 가져올 때 파일 확장자를 지정할 필요가 없으며 컴파일러가 자동으로 이를 감지합니다.

사용자가 여러 CSS 파일을 단일 파일로 가져오려면 다음 구문을 사용해야 합니다.

이제 @import 지시문을 사용하여 파일을 가져오는 방법을 예제와 함께 알아보겠습니다.

예제 1

예제 1

아래 예에서는 "font.scss" 파일에 몇 가지 변수를 추가했습니다. 그런 다음 "@import" 지시문을 사용하여 "fonts.scss" 파일의 내용을 "styles.scss" 파일로 가져옵니다.

"style.scss" 파일에서는 "font.scss" 파일의 변수를 사용합니다. 그런 다음 "styles.scss" 파일의 코드를 컴파일했고 사용자는 출력 이미지에서 "style.css" 파일의 업데이트된 코드를 관찰할 수 있습니다.

파일 이름 - Style.scss

파일 이름 - Fonts.scss

출력

예 2

예 2

아래 예시에서는 “color.scss” 파일에 색상 관련 변수를, “fonts.scss” 파일에 글꼴 관련 변수를 추가했습니다. "style.scss" 파일에서는 "@import" 지시어를 사용하여 "fonts.scss"와 "colors.scss" 파일을 함께 가져옵니다.

"style.scss" 파일에서는 색상 및 글꼴 변수를 사용합니다. 출력에서 사용자는 변수를 사용하는 특정 CSS 속성의 값을 관찰할 수 있습니다.

파일 이름 - Style.scss

파일 이름 - Colors.scss

파일 이름 - Fonts.scss

출력

@import 지시어 사용의 장점

아래에서 설명하는 "@import" 지시어를 사용하면 몇 가지 이점이 있습니다.

• 한 파일의 CSS 코드를 다른 파일로 가져올 수 있습니다.

• 코드의 각 구성 요소에 대해 별도의 CSS 파일을 만들고 필요할 때 가져올 수 있습니다.

@import 지시어 사용의 단점

'@import' 지시문을 사용하면 몇 가지 단점이 있습니다. 이에 대해서는 아래에서 설명합니다.

• 변수, 함수, 믹스인 등과 같은 CSS 파일의 모든 항목을 전역적으로 액세스할 수 있게 만듭니다. 따라서 개발자가 특정 변수가 정의된 위치를 결정하기가 어렵습니다.

• 가져온 각 파일의 모든 내용이 전역화되므로 충돌을 피하기 위해 각 파일은 서로 다른 변수 이름을 가져야 합니다.

• SASS 컴파일러는 가져오기 여부에 관계없이 모든 scss 파일을 컴파일하므로 컴파일 시간이 늘어나고 코드 효율성이 떨어집니다.

SASS에서 부분 파일 사용

위의 단점을 해결하기 위해 SASS에서 부분을 사용할 수 있습니다. 파일 이름 앞에 밑줄을 붙여 부분 scss 파일을 만들 수 있습니다. 예를 들어 '_test.scss', '_colors.scss' 등입니다.

부분을 사용할 때마다 SASS 변환기는 부분 파일의 코드를 컴파일하지 않으므로 코드 효율성을 높일 수 있습니다. 그러나 부분 scss 파일의 내용을 기본 scss 파일로 가져올 수 있습니다.

부분 scss 파일을 사용한 예시입니다.

예 3

아래 예시에서는 '_colors.scss' 부분 파일을 생성하여 'style.scss' 파일로 가져왔습니다. 이 예에서는 부분 파일을 사용하기 때문에 코드가 더 효율적으로 컴파일됩니다.

그러나 코드의 일부를 사용하는지 여부에 관계없이 코드 출력은 동일하게 유지됩니다.

파일 이름 - Style.scss

파일 이름 - _Color.scss

출력

사용자는 "@import" 지시문을 사용하여 한 파일의 코드를 다른 파일로 가져오는 방법을 배웠습니다. 이는 SCSS 코드를 더 작은 덩어리로 나누고 중복을 피하는 데 도움이 됩니다. 그러나 @import 지시문을 사용하면 몇 가지 단점이 있지만 부분을 사용하여 이 문제를 해결할 수 있습니다.

위 내용은 SASS @import 함수의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!