4、SASS-导入指令跟扩展指令

4、导入指令跟扩展指令

@规则跟指令

@import

• Sass 扩展了 CSS @import规则，容许其导入 SCSS 或 Sass 文件。被导入的所有SCSS 或 Sass文件将一块儿合并到同一个 CSS 文件中
• 被导入文件中所定义的任何变量或混入（mixins）均可以在主文件中使用
• 一般，@import 寻找 Sass 文件并将其导入，但在如下状况下，@import 仅做为普通的 CSS 语句，不会导入任何 Sass 文件:

1. 文件的扩展名是 .css
2. 文件名以 http:// 开始
3. 文件名是 url()
4. @import 中包含任何的媒体查询

@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);
复制代码

• 没有指定扩展名，Sass 将尝试找到以.scss 或.sass为扩展名的该名称文件并导入

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

• Sass 支持在一个 @import 规则中同时导入多个文件

@import "rounded-corners", "text-shadow";
复制代码

Partials

• 若是你有一个 SCSS 或 Sass 文件要导入，但不但愿将其编译到一个CSS文件，你能够在文件名的开头添加一个下划线

这将告诉Sass不要将其编译到一个正常的CSS文件。而后，在导入语句中却不须要添加下划线

可能有一个命名为 _colors.scss 的文件，可是不会编译成 _colors.css 文件。你能够这么作 @import "colors"; 这样， _colors.scss 将被导入。

注意，请不要将带下划线与不带下划线的同名文件放置在同一个目录下，好比，_colors.scss 和 colors.scss 不能同时存在于同一个目录下。不然带下划线的文件将会被忽略

@extend

• @extend 指令告诉 Sass 一个选择器的样式应该继承另外一选择器

.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; }
复制代码

• 多重扩展

.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; }
复制代码

• 链式扩展

.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%; }
复制代码

• 选择器序列

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; }
复制代码