一、@import 导入

Sass 拓展了 @import 的功能，允许其导入 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令都可以在导入的文件中使用。

// 不指定拓展名或指定拓展名为.scss 或 .sass，
// 则 Sass 将会试着寻找文件并导入
@import "style";
@import "style.scss";

// 同时导入多个文件
@import "rounded-corners", "text-shadow";

如下情况 @import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件：

文件拓展名是 .css；
文件名以 https:// 开头；
文件名是 url()；
@import 包含媒体查询。

@import "style.css";
@import "https://style.com/bar";
@import url(style);
@import "style" screen;

如果需要导入 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要单独编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss:

@import "colors";

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

1. 嵌套 @import

// example.scss
.example {
  color: red;
}

// 导入到 #main 样式内
#main {
  @import "example";
}

// --- 编译后 ---
#main .example {
  color: red;
}

二、@media 媒体查询

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。

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

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

@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and

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

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

三、@extend 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

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

每个 .seriousError 将包含 .error 与 .attention 下的所有样式，这时，后定义的样式享有优先权：.seriousError 的背景颜色是 #ff0 而不是 #fdd，因为 .attention 在 .error 之后定义。

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

每个 .seriousError 选择器将包含 .error 的样式，而 .criticalError 不仅包含 .seriousError 的样式也会同时包含 .error 的所有样式。

在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则继承给指令层内的 CSS，这样会生成大量的无用代码。也就是说，如果在 @media （或者其他 CSS 指令）中使用 @extend，必须继承给相同指令层中的选择器。

四、控制指令

1. @if

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

// --- 编译后 ---
p {
  color: green; 
}

2. @for

// 条件范围包含 <start> 与 <end> 的值
// @for $var from <start> through <end>
// 条件范围只包含 <start> 的值不包含 <end> 的值
// @for $var from <start> to <end>

@for $i from 1 through 2 {
  .item-#{$i} { width: 2em * $i; }
}

// --- 编译后 ---
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}

3. @each

// @each $var in <list>
@each $animal in puma, sea-slug {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
// 多参数
@each $header, $size in (h1: 2em, h2: 1.5em) {
  #{$header} {
    font-size: $size;
  }
}

// --- 编译后 ---
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}

h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}

4. @while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

// --- 编译后 ---
.item-6 {
  width: 12em;
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML/CSS 备忘录 - 18. Sass 常用指令

一、@import 导入

二、@media 媒体查询

三、@extend 继承

四、控制指令