Sass(SCSS) At-Rules #1[@import]

가져오기(import)

Sass도 CSS와 동일한 문법으로 파일을 import 할 수 있습니다. 차이점이 있다면 여러개의 파일을 쉼표로 구분하여 import 할 수 있다는 것입니다.

• import

  // style.scss
  @import 'foundation/code', 'foundation/lists';

• // foundation/_code.scss

  code {
    padding: .25em;
    line-height: 0;
  }

• // foundation/_lists.scss

  ul, ol {
    text-align: left;
  
    & & {
      padding: {
        bottom: 0;
        left: 0;
      }
    }
  }

---

파일 찾기(Finding the File)

Scss로 파일을 가져올 때(import) 가져올 파일의 확장자를 명시적으로 작성할 필요가 없습니다. "@import variables.scss" 혹은 "@import variables" 라고 적어도 됩니다.

1. 부분(Partials)

관례상, 컴파일 하지 않는, import 전용인 Sass 파일의 이름은 '_'로 시작합니다. 이 파일들을 Partials 이라고 부릅니다. 또한 Sass 툴에 해당 파일을 컴파일하지 말라고 명령합니다.

2. 색인 파일(Index Files)

폴더에 "_index.scss" 또는 "_index.sass" 파일을 만들면 폴더 자체를 가져올 때 해당 파일이 해당 위치에 대신 로드됩니다.

• import

  // foundation/_index.scss
  @import 'code', 'lists';
  
  // style.scss
  @import 'foundation';

• // foundation/_code.scss

  code {
    padding: .25em;
    line-height: 0;
  }

• // foundation/_lists.scss

  ul, ol {
    text-align: left;
  
    & & {
      padding: {
        bottom: 0;
        left: 0;
      }
    }
  }

---

중첩(Nesting)

import는 대체로 스타일 시트의 최상위 레벨에서 쓰이는데 꼭 그렇게 할 필요는 없습니다. 또한 스타일 규칙이나 일반 CSS 룰 내에서 중첩될 수 있습니다.

• import

  // style.scss
  .theme-sample {
    @import "theme";
  }

• // _theme.scss

  pre, code {
    font-family: 'Source Code Pro', Helvetica, Arial;
    border-radius: 4px;
  }

중첩되어 가져온 CSS는 믹스인(mixin) 처럼 평가되고, 부모 선택자가 중첩되어 있는 스타일시트의 선택자를 참조하게 됩니다.

• import

  // style.scss
  .theme-sample {
    @import "theme";
  }

• // _theme.scss

  ul li {
    $padding: 16px;
    padding-left: $padding;
    [dir=rtl] & {
      padding: {
        left: 0;
        right: $padding;
      }
    }
  }

---

CSS 가져오기(Importing CSS)

.scss or .sass 파일 이외에도 .css 파일을 가져올 수 있습니다. CSS파일을 가져올 때 '.css' 확장자를 명시적으로 포함하면 안 됩니다.

• import

  // style.scss
  @import 'code';

• CSS

  // code.css
  code {
    padding: .25em;
    line-height: 0;
  }

---

일반 CSS 가져오기(Plain CSS @imports)

@import는 Sass 뿐만 아니라 CSS에서도 정의되기 때문에 Sass는 컴파일 시 파일을 가져오려 하지 않습니다. 이레 따라 일반 CSS 파일을 컴파일하는 방법이 필요합니다. Scss가 가능한 한 CSS의 상위 집합이 되도록 하기 위해 Sass는 아래의 특징을 가진 CSS를 일반 CSS 가져오기로 컴파일 합니다.

 * URL이 .CSS로 끝난다. (Imports where the URL ends with .css.)
 * URL이 http 또는 http로 시작 (Imports where the URL begins http:// or https://.)
 * URL이 url()로 작성됨 (Imports where the URL is written as a url().)
 * 미디어쿼리 (Imports that have media queries.)

• import

  @import "theme.css";
  @import "http://fonts.googleapis.com/css?family=Droid+Sans";
  @import url(theme);
  @import "landscape" screen and (orientation: landscape);

보간법(Interpolation)

Sass import는 보간법을 사용할 수 없지만, 일반 CSS import(가져오기)는 가능합니다. mixin 매개변수를 기반으로 동적인 가져오기를 할 수 있습니다,

• import

  @mixin google-font($family) {
    @import url("http://fonts.googleapis.com/css?family=#{$family}");
  }
  
  @include google-font("Droid Sans");