@import

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

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

  • 如果文件的扩展名是 .css。

  • 如果文件名以 http:// 开头。

  • 如果文件名是 url()。

  • 如果 @import 包含了任何媒体查询（media queries）。

    如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入

@import "foo.scss"; 或  @import "foo";
两者都将引入 foo.scss 文件

但是
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
编译的结果没有变化

也可以通过一个 @import 引入多个文件：@import "rounded-corners", "text-shadow";

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

注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss不能与 colors.scss并存。

嵌套 @import

还可以把他们包含在 CSS 规则 和 @media 规则中

文件`example.scss`内容：
.example {
  color: red;
}
引用：#main {
  @import "example";
}
编译： #main .example {
  color: red;
}

@media

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

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

media嵌套：

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

使用插件#{}：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

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

@extend

Sass 中的 @extend 是用来扩展选择器或占位符

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

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

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}
编译： a:hover, .hoverlink {
  text-decoration: underline; }

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

前面我们知道 %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
这段代码在不调用之前不产生任何代码，只有能过@extend调用之后才生成代码：
.notice {
  @extend %extreme;
}
编译： #context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

@at-root

当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }  
}
编译：
.a {
  color: red;
}

.a .b {
  color: orange;
}

.a .b .c {
  color: yellow;
}

.d {
  color: green;
}

@debug

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

@warn

也是用来调试，显示警告信息

@error

也是用来调试，显示错误信息

results matching ""

    No results matching ""