Sass教程十：Sass知识点之 —— @import 、Partials 与 @media

@import 、Partials 与 @media

说到这个，有同学可能有疑问，css本身也有@import属性，sass再提出来，会不会有所多余呢？我们来分析一下css的 @import 

• 它更多是用来做媒体查询的
• 它每引入一个文件，都会向服务器发送一次请求
• 它并不是把引入的文件和当前文件进行融合
• 引入文件中定义的变量不能在当前文件中使用

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

• 文件拓展名是.css
• 文件名以http://开头；
• 文件名是url();
• 不能包含媒体查询 media queries。

@import 可以导入拓展名是.scss 和.sass的文件。如果没有指定拓展名，Sass将会尝试寻找文件名相同，拓展名为.scss 或 .sass的文件并将其导入 比如

@import "style.scss"
或
@import "style"

以上两行代码都可以导入文件style.scss

另外，Sass可以把Sass文件当做一个组件引入而不会把这个组件单独编译成css文件 而想要实现这个功能只需要在文件名前面加上一个下划线就可以了 比如_components.scss 这时候编辑器不会自动编译这个文件，而只有当我们在另一个scss文件里引入这个文件之后，才会把这个文件里的内容编译到引入的文件里：

现在我在项目中建立了两个scss文件

• _components.scss
• style.scss

可以看到_components.scss并没有被编辑器所编译，只有一个孤零零的scss文件，而下面的style.scss文件则被编译成了css文件，并附带了一个map文件。

另外还可以看到一点，_components中定义的@mixin在style中是可以正常使用的，也就是说我们可以把一些公用的文件提取出来，然后在需要用的地方引入就可以了，这对于模块化开发非常有帮助，

打开bootstrap的源码，可以看到里面定义了非常多以下划线开头的scss文件，我们可以称这些文件为组件，每个组件只负责一个功能模块，然后在一个汇总的scss文件中引入就可以了，甚至组件之间可以相互引用相互依赖，这样我们最终只需要关心最终的scss文件就可以了。这种组件，Sass称之为 Partials。

甚至，在Sass中，@import还可以用于嵌套：

.example {
  color: red;
}

#main {
  @import "example";
}

编译之后：
#main .example {
  color: red;
}

Sass的嵌套体系中还有一个比较好用的东西 @media .这个指令的基本用法和css中的用法基本一样，只是增加了一点额外的功能：允许其在css规则中嵌套。如果@media 嵌套在css规则内，在编译时，@media将会被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱css的书写流程。

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

比如这段代码，从上往下来读我们能理解到的意思是： 选择器sidebar 宽度为 300 当媒询条件满足时，宽度为500 

而实际编译完成之后也确实会编译成我理解的那样 

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