四、导入指令跟扩展指令

@规则跟指令

@import

Sass 扩展了 CSS @import规则，允许其导入 SCSS 或 Sass 文件。被导入的全部SCSS 或 Sass文件将一起合并到同一个 CSS 文件中

被导入文件中所定义的任何变量或混入（mixins）都可以在主文件中使用

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件:

文件的扩展名是 .css

文件名以 http:// 开始

文件名是 url()

@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; }

四、导入指令跟扩展指令

@规则跟指令

@import

Partials

@extend

猜你喜欢