수색…


가져 오는 중

@import 사용하면 파일을 여러 개의 작은 파일로 나눌 수 있습니다. 스타일 시트의 구조를보다 잘 유지하고 매우 큰 파일을 피할 수 있기 때문에 이는 의미가 있습니다.

파일이 몇 개 있다고 가정 해 보겠습니다.

- application.scss
- header.scss
- content
  |-- article.scss
  '-- list.scss
- footer.scss

기본 스타일 시트 application.scss 는 모든 파일을 가져올 수 있으며 자체 스타일을 정의 할 수 있습니다.

// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';

// other styles in application.scss
body {
  margin: 0;
}

@import 'header'; 쓸 수 있도록 .scss 확장자를 생략 할 수도 있습니다 @import 'header'; @import 'header.scss' 대신.

그러면 application.scss 가 클라이언트 (브라우저)에 제공하는 컴파일 된 파일에 포함 된 모든 .scss 파일을 가져 .scss . 이 경우 컴파일 된 파일은 html에 포함 된 application.css 입니다.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
  </head>
  <body>
    ...
  </body>
</html>

여러 파일로 작업하고는 있지만 하나의 파일 만 제공하므로 여러 파일 (각 파일 당 하나씩)이 필요없고 방문자의로드 시간이 빨라집니다.

주요 이점

  • 폴더 및 여러 파일을 사용하여 개발하기위한 구조 개선
  • 클라이언트 (브라우저)에 하나의 파일 만 제공

부분

스타일 시트의 더 작은 스 니펫을 포함하는 부분 파일을 작성할 수 있습니다. 이렇게하면 CSS를 모듈화하고 스타일 시트의 구조를 개선 할 수 있습니다. 부분은 선행 밑줄로 명명 된 Sass 파일입니다 (예 : _partial.scss . 밑줄을 쓰면 Sass는 특정 파일이 부분적이며 CSS 파일로 생성되지 않는다는 것을 알 수 있습니다.

Sass 부분은 @import 지시어와 함께 사용하기위한 것입니다. @import 를 사용할 때 @import 밑줄을 생략 할 수 있습니다.

이 부분과 파일 구조가 있다고 가정하면

- main.scss
- _variables.scss
- content
  |-- _buttons.scss
  '-- _otherelements.scss

다음과 같이 main.scss 파일에 이러한 부분을 포함 할 수 있습니다 (이 예제에서는 밑줄과 파일 확장자가 생략되어 있습니다).

// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow