Import Google font doesn't follow structure #843

rajibmp opened this Issue Jul 6, 2013 · 3 comments


None yet

3 participants


I imported few fonts from Google API, and the Import line goes top of the page. No matter where I put the import function in scss file, the output goes at top of css(compiled) page.

To give clear view of the issue, my scss file is here where I import the code:

This is the output page after compiling scss:

Sass member

The CSS import directive is required to be at the top of a CSS file. This is Sass saving you from yourself 🍀

From the spec:

In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present).


Look a little closer. Yes, @import must must precede all other rules. The OP didn't make it clear, but the problem is that they want to have the comments appear with the import.

What they want:

/* comment here about the file that's being imported */
@import url('somefile.css');

What they're getting:

@import url('somefile.css');
/* comment here about the file that's being imported */

Comments are allowed to precede imports.

Sass member

I see. Good catch.

I guess we could only move the import node if we detect it was in an illegal place.

Associating comments to selectors and directives is a tricky concept. It's not obvious that a comment is always documenting the thing below it. Sometimes it is a piece of code that is disabled, etc.

@chriseppstein chriseppstein reopened this Jul 9, 2013
@nex3 nex3 closed this in 18ed5bc Jan 25, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment