Fourth, the import command with the extended instruction

@ Rule with instruction

@import

• Sass expanded CSS @import rules, allowing it to import or SCSS Sass file. All SCSS Sass imported file or combined into a single file along CSS
• Is any variable or mixed (as mixins) defined in the import file can be used in the main file
• Usually, @ import file and import it to find Sass, but in the following cases, @ import only as a general statement of CSS, Sass does not import any files:

1. The file extension is .css
2. File name with http: // start
3. The file name is url ()
4. @import contains any media queries

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
将全部编译为
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

• Did not specify an extension, Sass will try to find the name of the file to .scss or .sass for the extension and import

@import "foo.scss";或
@import "foo";
这两行代码都能导入文件foo.scss

• Sass supported import multiple files at a @import rule

@import "rounded-corners", "text-shadow";

Partials

• If you have a SCSS Sass or file you want to import, but do not want to compile it into a CSS file, you can add an underscore at the beginning of the file name

This tells Sass do not compile it into a normal CSS file. Then, the import statement does not need to add an underscore

There may be a _colors.scss file name, but not compiled into _colors.css file. You can do @import "colors"; so, _colors.scss will be imported.

Note Do not underlined and not underlined the same file is placed in the same directory, for example, _colors.scss and colors.scss can not coexist in the same directory. Otherwise, the file will be ignored underlined

@extend

• @extend instruction Sass told a selector style should inherit other selector

.error { border: 1px #f00; background-color: #fdd; }
.seriousError { @extend .error; border-width: 3px; } 编译为：
.error, .seriousError { border: 1px #f00; background-color: #fdd; } .seriousError { border-width: 3px; }

.error { border: 1px #f00; background-color: #fdd; }
.error.intrusion { background-image: url("/image/hacked.png"); }
.seriousError { @extend .error; border-width: 3px; } 编译为：
.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); }
.seriousError { border-width: 3px; }

• Multiple expansion

.error { border: 1px #f00; background-color: #fdd; }
.attention { font-size: 3em; background-color: #ff0; }
.seriousError { @extend .error; @extend .attention; border-width: 3px; } 编译为：
.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.attention, .seriousError { font-size: 3em; background-color: #ff0; }
.seriousError { border-width: 3px; }

• Chain extension

.error { border: 1px #f00; background-color: #fdd; }
.seriousError { @extend .error; border-width: 3px; }
.criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; } 编译为：
.error, .seriousError, .criticalError { border: 1px #f00; background-color: #fdd; }
.seriousError, .criticalError { border-width: 3px; }
.criticalError { position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; }

• Sequence selector

a { color: blue; &:hover { text-decoration: underline; } }
#fake-links .link { @extend a; } 将被编译为：
a, #fake-links .link { color: blue; }
.seriousError, .criticalError { border-width: 3px; }
a:hover, #fake-links .link:hover { text-decoration: underline; }