[SASS] 5강 SASS의 @import - OSSAM강좌

 

 

 

 

 

** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.

https://youtu.be/T8Dq_GJ7IPU

 

 

 

 

 

 

 

 

 

 

1. 사스파일 가져오기

- SASS도 CSS처럼 @import구문을 지원, 다른 SASS파일을 불러온다.

- CSS는 @import를 사용할 때마다 HTTP요청을 추가해서 작업하지만

  SASS는 CSS로 바로 처리하기 때문에 HTTP호출이 필요하지 않다.

 

 

1) 구문

 

@import 파일명;

 

- TIP : 파일 확장자를 지정할 필요가 없다. SASS에서는 당연히 파일명.scss를 가져온다고 가정하기 때문이다.

        css파일을 가져오고 싶은 경우는 확장자를 지정하면 된다.

 

 

 

 

 

 

 

2) 예시

- D드라이브에 [sassTest]폴더에 [test.scss]와 [test.css]를 만들었다고 가정

- [var.scss]도 만들어서 여기에는 변수들만 담도록 처리

 

 

 

 

- [var.scss]에 변수들을 작성

 

$myColor: red;
$myFont: '궁서';

 

 

 

- [test.scss]에서 불러와서 요소에 적용

 

@import "var";

h1{
    color: $myColor;
    font-family: $myFont;
}

 

 

 

- cmd에서 watch로 자동업데이트 시작

 

sass --watch test.scss:test.css --style expanded --sourcemap=none

 

 

 

 

- [test.css] 결과확인

 

@charset "UTF-8";
h1 {
  color: red;
  font-family: "궁서";
}