为什么首页引入的是css，但浏览器f12却是scss

导入.sass或.scss文件

css有一个不太常用的特性，即@import导入功能，它允许在一个css文件中导入其他css文件。然而，结果是只有执行到@import规则时，浏览器才会去下载其他css文件，这会导致页面样式加载特别慢，从而容易出现页面闪的问题。

sass也有@import导入规则，与css不同的是，sass中的@import规则会在生成css文件时，把相关的文件导入合并成一个文件，而无需浏览器去下载其他的文件。另外在被导入文件中定义的变量等也可以在导入文件中正常使用。

在使用@import导入sass文件时，可以省略sass文件的后缀名.sass或.scss，例如：

- a.scss

body {

background-color: #f00

}

- style.scss

@import "a"

div {

color: #333

}

编译后的style.css文件内容如下:

body {

background-color: #f00

}

div {

color: #333

}

1、koala软件编译

2、sass命令：依靠环境。

自动编译命令：（编译单个文件/编译整个文件夹）

编译单个文件

sass文件目录 sass --watch scss文件的路径:css文件的路径 --style expanded

编译整个文件夹

sass文件目录 sass --watch scss文件夹/. : css文件夹/. --style expanded

3、gulp编译

4、hbulid编译

①　工具--预编译设置

②　新建一个预编译配置 .scss

③　输入触发命令的地址：ruby里面的sass.bat地址

④　命令参数：%FileName% ../css/%FileBaseName%.css

---