creative
SASS
2019.09.19 20:45

Sass @import

조회 수 68 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

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;
}

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 SASS Sass @while 2019.09.20 37
40 SASS Sass @for 2019.09.20 25
39 SASS Sass @each 2019.09.20 20
38 SASS Sass @if and @else 2019.09.20 12
37 SASS Sass Operators 2019.09.20 12
36 SASS Sass Introspection Functions 2019.09.19 36
35 SASS Sass Color Functions 2019.09.19 25
34 SASS Sass Selector Functions 2019.09.19 23
33 SASS Sass Map Functions 2019.09.19 57
32 SASS Sass List Functions 2019.09.19 49
31 SASS Sass Numeric Functions 2019.09.19 50
30 SASS Sass String Functions 2019.09.19 63
29 SASS Sass @extend 2019.09.19 61
28 SASS Sass @mixin과 @include 2019.09.19 88
» SASS Sass @import 2019.09.19 68
26 SASS Sass 중첩 규칙과 속성 2019.09.19 37
25 SASS Sass 변수 2019.09.19 46
24 SASS Sass 소개 2019.09.19 94
23 SASS SASS 샘플 2019.08.16 67
22 HTML ::after ::before 토글 사용 예제 2019.06.28 125
Board Pagination Prev 1 2 3 Next
/ 3

Menu