왜 Sass는 @import를 컴파일 된 CSS의 맨 위로 이동합니까?

Question

레일 4.1.8, 말대꾸 레일 5.0.1, 말대꾸 3.4.10, 톱니 레일 2.2.4, 톱니 2.12.3

이 내 application.scss의 상단이 모습입니다 :

@import "variables"; 
@import "extends"; 
@import "typography"; 
@import "forms"; 
@import "tables"; 
@import "lists"; 
@import "flashes"; 
@import "buttons"; 

이 _typography.scss의 상단이

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700); 
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,500,700); 

body { 
    color: $base-font-color; 
    font-family: $base-font-family; 
    font-size: $base-font-size; 
    -webkit-font-smoothing: antialiased; 
    line-height: $base-line-height; 
    font-family: $sans-serif; 
} 

모습입니다 :

이

/* 
*= require_self 
*= depend_on_asset "myicons.eot" 
*= depend_on_asset "myicons.woff" 
*= depend_on_asset "myicons.ttf" 
*= depend_on_asset "myicons.svg" 
*= depend_on_asset "foo/bar.jpg" 
*/ 

@import "normalize-rails"; 
@import "bourbon"; 
@import "grid_settings"; 
@import "neat"; 
@import "bitters/base"; 

는 쓴맛이 /베이스 모습입니다

그리고 이것은 생성 된 application.css의 상단이

@charset "UTF-8"; 
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 
/** 
* 1. Set default font family to sans-serif. 
* 2. Prevent iOS text size adjust after orientation change, without disabling 
* user zoom. 
*/ 
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700); 
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,500,700); 
/* line 9, /Users/john/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/normalize-rails-3.0.1/vendor/assets/stylesheets/normalize-rails/normalize.css */ 
html { 
    font-family: sans-serif; 
    /* 1 */ 
    -ms-text-size-adjust: 100%; 
    /* 2 */ 
    -webkit-text-size-adjust: 100%; 
    /* 2 */ 
} 

문제 모습입니다 :주의 생성 된 CSS에서, 두 @import url(... 글꼴 선이 normalize.css 사이에 주입하는 방법을

무엇을 할 수 이걸 일으키는거야? 조사를 시작 해야할지조차 모르겠다.

Answer 1

CSS spec에 따르면 @import 규칙이 문서의 첫 번째 규칙이어야합니다 (@charset 규칙 제외).

그리고 Sass는 유효한 CSS 파일을 생성하기를 좋아하므로 모든 @import을 맨 위로 푸시합니다.