在CSS中，我们可以通过@import指令将一个css文件导入到另一个css文件中。但是它有一个需要注意的地方，就是浏览器只有在执行@import指令的时候才会下载其他的css文件，导致页面加载很慢，所以不是很常用。Sass语言也支持使用@import指令，与CSS有一些区别。让我们来看看如何使用@import指令在Sass中导入文件。Sass导入文件Sass中也有一个@import规则，但它与CSS有点不同。CSS中的@import指令每次调用时都会创建一个额外的HTTP请求。Sass中的@import规则在生成CSS文件时导入相关文件，不需要额外的HTTP请求。导入Sass文件时，可以省略导入文件的全名和.sass或.scss扩展名。这样就可以在不修改样式表的情况下修改导入的Sass样式文件的语法，并且可以随意切换sass和scss的语法。例子：比如已知有两个Sass文件：//first.scssfile.xkd{font-size:14px;p{颜色：粉色；}}//second.scssfile.f14{font-size:14px;}.f16{font-size:16px;}如果我们需要将second.scss文件导入到first.scss文件中，可以这样：.xkd{font-size:14px;p{颜色：粉色；}}@导入“./second”；然后执行编译命令：sassfirst.scss:first.css--styleexpanded上面代码编译出来的CSS代码如下（first.css）：.xkd{font-size:14px;}.xkdp{color:pink;}.f14{font-size:14px;}.f16{font-size:16px;}可以看出第二个.scss文件中的代码也成功编译到了第一个.css文件。需要注意的是，CSS中的@import指令必须在文件的顶部，而Sass中的@import指令可以在文件的任意位置。由于Sass兼容原生CSS语法，我们也可以在Sass文件中导入CSS文件。使用SASS部分文件在实际项目中可能会创建很多Sass文件，但一般不是每个Sass文件都有对应的CSS文件，而是将少数Sass文件生成成CSS文件，其他Sass文件通过@import导入到这些Sass文件中.一般不需要生成独立CSS文件的Sass文件称为partial文件，Sass中有特殊的约定来命名这些文件。Sass部分文件的文件名以下划线开头，这样Sass在编译时不会单独编译这个文件来输出CSS，而只是把这个文件作为导入。导入部分文件时，文件名开头的下划线可以省略。例子：比如现在有一个局部文件_myfile.scss，这个文件在编译的时候不会生成对应的CSS文件，而是导入到其他Sass文件中。导入格式如下：@import"_myfile";嵌套导入Sass文件的导入与CSS略有不同，即Sass支持import命令编写嵌套语法，导入的Sass部分文件会直接插入到导入的CSS规则中。例子：比如现在有一个Sass文件的一部分_myfile.scss:.xkd{font-size:14px;}然后将这个部分文件导入到另一个Sass文件中style.scss:.div{color:#ccc;.div-top{border:1pxsolid#000;@import"./我的文件";}}编译成CSS代码：.div{color:#ccc;}.div.div-top{border:1pxsolid#000;}。div.div-top.xkd{font-size:14px;}可以看到编译后的CSS文件中，部分文件_myfile.scss中的样式嵌套在了.div-top选择器中。
