sass
부분 및 가져 오기
수색…
가져 오는 중
@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';