[basic] SCSS - @import (가져오기)

1. @import 정의
2. @import 구문
3. @import 예제 - import 할 때, 확장자 안 붙임
4. @import 예제 - partials 경우 import 할 때, _ 안 붙임

@import 정의 

 

reset file, variables, colors, fonts, font-sizes 등을
별도 파일로 분리 후 다른 파일에서 가져올 때 사용.

---

1.
반복 회피 가능 장점.

 

2.

CSS   @import : 호출 때마다 추가 HTTP 요청해  성능 저하 야기.  

SCSS @import : CSS 자체에 파일이 포함되어, 성능 저하 야기 X.

 

@import 구문

 

@import filename;

 

---

PS.

 

1.

filename (파일명)엔 확장자 붙일 필요 없음. (※ css 파일도 가능.)

(∵ SASS는 자동으로 .sass 또는 .scss 파일이라 간주.)

 

2.

@import filename; 구문이 포함된 파일에서는

filename (파일명)에 포함된 「변수 및 mixin (믹스인)」 사용 가능.

 

3.

파일명 앞에 _ (언더바) 붙으면 SASS는 그 파일을 CSS로 변환 X.

이런 _ 붙은 파일을 partials(부분)이라 함. (예) _color.scss

scss 파일에서 partials 파일을 가져올 때는, _ (언더바)를 안 붙임. 
@import color;

 

---

[예제]

 

@import "variables";

@import "colors";

@import "reset";

 

@import 예제 - import 할 때, 확장자 안 붙임

reset.scss

 

html,

body,

ul,

ol {

  margin: 0;

  padding: 0;

}

 

---

style.scss

 

@import "reset";

body {

  font-family: Helvetica, sans-serif;

  font-size: 18px;

  color: red;

}

 

---

style.css

 

html, body, ul, ol {

  margin: 0;

  padding: 0;

}

body {

  font-family: Helvetica, sans-serif;

  font-size: 18px;

  color: red;

}

 

@import 예제 - partials 경우 import 할 때, _ 안 붙임

_colors.scss

 

$hZPink: #EE82EE;

$hZBlue: #4169E1;

$hZGreen: #8FBC8F;

 

---

style.scss

 

@import "colors";

body {

  font-family: Helvetica, sans-serif;

  font-size: 18px;

  color: $myBlue;

}