SASS
2019.09.19 20:45
Sass @import
조회 수 2341 추천 수 0 댓글 0
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; }
번호 | 분류 | 제목 | 날짜 | 조회 수 |
---|---|---|---|---|
41 | SASS | Sass @while | 2019.09.20 | 3238 |
40 | SASS | Sass @for | 2019.09.20 | 2747 |
39 | SASS | Sass @each | 2019.09.20 | 2444 |
38 | SASS | Sass @if and @else | 2019.09.20 | 3222 |
37 | SASS | Sass Operators | 2019.09.20 | 2607 |
36 | SASS | Sass Introspection Functions | 2019.09.19 | 2421 |
35 | SASS | Sass Color Functions | 2019.09.19 | 3608 |
34 | SASS | Sass Selector Functions | 2019.09.19 | 2241 |
33 | SASS | Sass Map Functions | 2019.09.19 | 2377 |
32 | SASS | Sass List Functions | 2019.09.19 | 2615 |
31 | SASS | Sass Numeric Functions | 2019.09.19 | 2367 |
30 | SASS | Sass String Functions | 2019.09.19 | 3713 |
29 | SASS | Sass @extend | 2019.09.19 | 2290 |
28 | SASS | Sass @mixin과 @include | 2019.09.19 | 2998 |
» | SASS | Sass @import | 2019.09.19 | 2341 |
26 | SASS | Sass 중첩 규칙과 속성 | 2019.09.19 | 2360 |
25 | SASS | Sass 변수 | 2019.09.19 | 2141 |
24 | SASS | Sass 소개 | 2019.09.19 | 13118 |
23 | SASS | SASS 샘플 | 2019.08.16 | 2872 |
22 | HTML | ::after ::before 토글 사용 예제 | 2019.06.28 | 3141 |