Sass @import and Partials

 

 @import 지시자를 통해 다른 곳의 파일을 불러들일 수 있다.

 

예제

@import "variables";
@import "colors";
@import "reset";

위의 예처럼 reset을 import하면 외부 scss를 불러들인다.

불러들일 코드는 아래와 같다.

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

 

 @import 지시자는 파일의 가장 위에 사용하며 변수의 범위는 global scope이다.

 

예제

@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

 

출력 결과는 아래와 같다.

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

 

Sass Partials

파일이름 앞에 _를 추가하여 사용한다.

 _filename;

 

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

 

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}