2. CSS의 기반 SASS 기본 정의 (Import)

Import

@import로 다른 파일 가져오기

- css에서 @import로 다른 파일을 연결시킬 수 있습니다.

문법

SASS에서 @import의 문법은 다음과 같습니다.

@import "path/filename";

예를 들어

@import "inc/abc.scss";

는 inc 폴더 안의 abc.scss 파일을 가져옵니다.

- 그냥 바로 @import 쓰고 "내용물"; // 이렇게 불러 오면됨.

SASS 랑 CSS랑 @import 형식 비교법

SASS

@import "inc.css";

CSS

@import url(inc.css);

=======================================================

SASS 응용

inc.scss

h1 { margin: 30px 0px; } // inc.scss 내용물

SASS

@import "inc.scss"; 
p { font-size: 12px; }

CSS // css일 경우 이렇게 해야함.

h1 { 
  margin: 30px 0px;
}
p {
  font-size: 12px
}

SASS 확장자 없이 가져오기

예를 들어

@import "inc";

는 다음 파일이 있는지 검색합니다.

• inc.scss
• inc.sass  //
• _inc.scss
• _inc.sass //

네 개 중 하나만 존재하면 그 파일을 가져오고, 여러 파일이 존재하면 변환 시 에러가 납니다.