CSS @import 규칙을 사용하는 방법

CSS @import 규칙 사용 방법 알아보기 스타일시트를 가져옵니다.

CSS @import at-rule을 사용하면 CSS 스타일시트를 다른 CSS 스타일시트로 가져올 수 있습니다. 크고/증가하는 코드베이스가 있는 웹사이트에 실용적입니다.

기본 사용법:

@import url(variables.css);

이 방법을 사용하면 하나의 큰 스타일시트에 모든 스타일을 보관하는 것과는 대조적으로 CSS 스타일을 변수, 타이포그래피, 색상, 간격 등에 대한 개별 파일로 분리할 수 있습니다.

그런 다음 모든 개별 CSS 파일을 기본 CSS 스타일시트로 가져와 함께 추가할 수 있습니다.

/* Your main.css CSS file */
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

이것은 시간이 지남에 따라 코드베이스가 커짐에 따라 모든 것을 깔끔하게 정리할 수 있는 실용적인 방법입니다.

@import를 사용할 때 중요

@import를 사용할 때 알아야 할 가장 중요한 사항 @import 메인 맨 위에 있는 설명 CSS 파일(모든 CSS 파일을 가져오는 파일).

예:

/* 
Your main.css CSS file 
Don’t add CSS above your import statements! 
*/
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

/* 
You can add CSS below
*/

.other-stuff {
    padding: 16px;
    background-color: blue;
}

@import 위에 CSS 스타일 지정(기본 CSS 파일에서)을 넣으면 진술, 그것은 무시됩니다.

미디어 쿼리와 함께 @import 사용

@import를 사용할 수도 있습니다. 조건부로 CSS 스타일시트를 가져오는 문. 예를 들어 스마트폰과 같은 작은 화면에서만 로드되어야 하는 특정 스타일시트가 있는 경우 @import에 미디어 쿼리를 첨부하여 이를 제어합니다. 진술:

@import "mobile.css" screen and (max-width: 768px);

위의 예에서 mobile.css 스타일시트는 최대 너비가 768픽셀인 화면에만 적용됩니다.