sas导入sas7bdat（sass 导入@import详解）

@import

​ Sass 拓展了 @import 的功能
  
  
  
  
  
  
 ，允许其导入 SCSS 或 Sass 文件              。被导入的文件将合并编译到同一个 CSS 文件中  
  
  
  
  
  
  ，另外
 


 


 


 


 


 


 

，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用
  
 
  
 
  
 
  
 
  
 
  
 
  
。

例如：

public.scss

$font-base-color:#333;

index.scss

@import "public"; $color:#666; .container{ border-color: $color; color: $font-base-color; }

编译后：

.container { border-color: #666; color: #333; }

注意：跟我们普通css里面@import的区别

但是如下的几种方式
 
 
 
 
 
 
，都将作为普通的 CSS 语句   
   
   
   
   
   
   ，不会导入任何 Sass 文件

文件拓展名是 .css； 文件名以 http:// 开头； 文件名是 url()； @import 包含 media queries












。 @import "public.css"; @import url(public); @import "http://xxx.com/xxx";

局部文件(Partials)

​ Sass源文件中可以通过@import指令导入其他Sass源文件
 

 

 

 

 

 

 
，被导入的文件就是*局部文件*

 

 

 

 

 

 

，局部文件让Sass模块化编写更加容易 
  
  
  
  
  
  
 。

​ 如果一个目录正在被Sass程序监测              ，目录下的所有scss/sass源文件都会被编译
 
 

 
 

 
 

 
 

 
 

 
 

 
 ，但通常不希望局部文件被编译













，因为局部文件是用来被导入到其他文件的
  
  
  
  
  
  
 。如果不想局部文件被编译                    ，文件名可以以下划线 （_）开头

_theme.scss

$border-color:#999; $background-color:#f2f2f2;

index.scss

@import "public"; @import "theme"; $color:#666; .container{ border-color: $border-color; color: $font-base-color; background-color: $background-color; }

编译后：

.container { border-color: #999; color: #333; background-color: #f2f2f2; }

​ 可以看到 
 
 
 
 
 
 
 
 
 
 
 
 
 ，@import 引入的_theme.scss




















，可以没有下划线(__)             ，这是允许的  
 
  
 
  
 
  
 
  
 
  
 
  
 ，这也就意味着













，同一个目录下不能同时出现两个相关名的sass文件（一个不带_
  
  
  
  
  
  
 ，一个带_）  
  
  
  
  
  
  ，添加下划线的文件将会被忽略
 


 


 


 


 


 


 
。

嵌套 @import

​

​ 大多数情况下
 


 


 


 


 


 


 

，一般在文件的最外层（不在嵌套规则内）使用 @import
 
 
 
 
 
 
，其实   
   
   
   
   
   
   ，也可以将 @import 嵌套进 CSS 样式或者 @media 中
 

 

 

 

 

 

 
，与平时的用法效果相同

 

 

 

 

 

 

，只是这样导入的样式只能出现在嵌套的层中 
 
 
 
 
 
 
。

base.scss

.main-color{ color: #F00; }

index.scss

.container{ @import "base"; }

最后生成

.container .main-color { color: #F00; }

注意：被导入的文件不能是局部文件方式（在前面不能加_）