sass文件的导入

• css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

• sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

• 使用SASS部分文件;

   那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。   sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。@import "sass文件的路径";   局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。

• 默认变量值;

   一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。   也可以定制修改sass库文件中的某些值，使用sass的!default标签可以实现这个目的。   !default含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。   $fancybox-width: 400px !default;  .fancybox {    width: $fancybox-width;  }

• 嵌套导入

   跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。   被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。这些变量和混合器不会全局有效。   例如：   .blue-theme {@import "blue-theme"}   //生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。   .blue-theme {     aside {      background: blue;      color: #fff;     }   }

• 原生的CSS导入;

   由于sass兼容原生的css，所以它也支持原生的CSS@import。   尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import被导入文件的名      1.以.css结尾；      2.被导入文件的名字是一个URL地址      3.被导入文件的名字是CSS的url()值。   因为sass的语法完全兼容css，所以你也可以把原始的css文件改名为.scss后缀，即可直接导入了。

• 静默注释;

   在原生的css中，注释对于其他人是直接可见的，但sass提供了一种方式可在生成的css文件中按需抹掉相应的注释。格式为//   body {   color: #333; // 这种注释内容不会出现在生成的css文件中   padding: 0; /* 这种注释内容会出现在生成的css文件中 */}   实际上当注释/*  */出现在原生css不允许的地方，如在css属性或选择器中，这些注释也会被抹掉。     color /* 这块注释内容不会出现在生成的css中 */: #333;