10天精通Sass 之 Sass的@规则

@import

Sass支持所有CSS3的@规则，此外还有一些Sass专属的规则。

Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

@import根据文件名引入，默认情况下，它会寻找Sass文件并直接引入，只有在少数情况下，会被编译成CSS中的@import规则。

1. 文件名扩展名是.css
2. 文件名以http://开头
3. 文件名是url()
4. @import中包含了媒介查询(media query)

如果不是以上几种情况，扩展名是.scss或者是.sass.该名称的sass或者scss文件就会被引入。如果没有扩展名，Sass会试着找出具有scss或sass扩展名的同名文件并将其引入。

@import "base.scss"

@import "base"

上面的效果是一样的，都是引入base.scss文件

@import "base.css";@import "base" screen;@import "http://base.com/bar";@import url(base);

编译出来的CSS:

@import url(base.css);@import "base" screen;@import "http://base.com/bar";@import url(base);

可以通过一个import引入多个文件。

@import "base", "extend"

如果你有一个 SCSS 或 Sass 文件需要引入， 但是你又不希望它被编译为一个 CSS 文件， 这时，你就可以在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后，你就可以像往常一样引入这个文件了，而且还可以省略掉文件名前面的下划线。

例如，文件名叫 _base.scss。

@import "base"

这样不会生成base.css文件。

注意 在同一个目录下，不能同时存在带下划线和不带下划线的同名文件。

media

Sass中的@media指令和CSS的使用规则一样简单，但是它有另一个功能，可以嵌套在ＣＳＳ规则中。有点类似JS的冒泡功能。如果在样式中使用@media指令，它将冒泡到外面。

.sidebar {  width: 300px;  @media screen and (orientation: landscape) {    width: 500px;  }}

编译出来的CSS为:

.sidebar {  width: 300px;}@media screen and (orientation: landscape) {  .sidebar {    width: 500px;  }}

@media可以嵌套

@media screen {  .sidebar {    @media (orientation: landscape) {      width: 500px;    }  }}

编译出来的CSS为:

@media screen and (orientation: landscape) {  .sidebar {    width: 500px;  }}

使用@media时，还可以结合插值#{}使用。

$media: screen;$feature: -webkit-min-device-pixel-ratio;$value: 1.5;@media #{$media} and ($feature: $value) {  .sidebar {    width: 500px;  }}

编译出来的CSS为:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {  .sidebar {    width: 500px;  }}

@extend

@extend 用来扩展选择器或占位符

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

编译出来的CSS为:

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

扩展选择器：

@extend 不止扩展类选择器，还可以扩展任何选择器，比如 .special.cool, a:hover, 或 a.user[href^=“http://“]，例如：

.hoverlink {  @extend a:hover;}a:hover {  text-decoration: underline;}

编译出来的CSS为:

a:hover, .hoverlink {  text-decoration: underline;}

更复杂的是:

.hoverlink {  @extend a:hover;}.comment a.user:hover {  font-weight: bold;}

编译出来的CSS为:

.comment a.user:hover, .comment .user.hoverlink {  font-weight: bold;}

使用.hoverlink去替换a:hover

多个扩展

可以使用 @extend 来继承多个选择器或占位符的样式

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

编译出来的CSS为:

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

扩展单一选择器

%placeholder 不使用@extend显示调用是不会生成任何样式代码

#context a%extreme {  color: blue;  font-weight: bold;  font-size: 2em;}.notice {  @extend %extreme;}

编译出来的CSS为：

#context a.notice {  color: blue;  font-weight: bold;  font-size: 2em;}

.notice替换 %extreme

@root

@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。

div {  color: red;  ul {    color: orange;    li {      color: yellow;      @at-root img {        color: green;      }    }  }  }

编译出来的CSS为:

div {  color: red;}div ul {  color: orange;}div ul li {  color: yellow;}img {  color: green;}

@at-root直接跳到最外层。

@debug

@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:

用法:

@debug "error"

@warn

@warn和@debug用法相同，都是帮助我们更好的调试Sass.

@error

@error于@warn、@debug用法相同，都是帮助我们更好的调试Sass.

graph LRA-->B