MENU
import
@import works as a conventional CSS directive when:- the file's extension is .css. eg.:
@import "foo.css"; - the filename begins with http://. eg.
@import "http://foo.com/bar"; - the filename is a url(). eg.
@import url(foo); - the @import has any media queries. eg.
@import "foo" screen;
A .scss or .sass file will be imported when:
- the extension is .scss or .sass. eg.:
@import "foo.scss"; - there is no extension. eg.:
@import "foo";
(importing foo.scss)
If you wish to import a .scss file without generating the .css file for it, precede the filename with an underscore. An @import directive may import multiple files and be nested.
_color.scss:
margin.scss:
_color.scss:
.a {
color: red;
}margin.scss:
.b {
margin: 0 auto;
}.example {
@import "color", "margin";
}.example .a {
color: red;
}
.example .b {
margin: 0 auto;
}It's not possible to dynamically import a Sass file based on a variable; interpolation is only for CSS imports. As such, it only works with url() imports.
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");@import url("http://fonts.googleapis.com/css?family=Droid+Sans");