Scss--@import--使用/

简介

说明

        本文介绍Scss的@import的用法。

概述

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

        Sass 在当前地址，或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件，如果需要设定其他地址，可以用 :load_paths 选项，或者在命令行中输入 --load-path 命令。

文件名

        通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

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

        如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

下边两种都会导入文件 foo.scss

@import "foo.scss";

或

@import "foo";

其他示例

1.  
   @import "foo.css";
2.  
   @import "foo" screen;
3.  
   @import "http://foo.com/bar";
4.  
   @import url(foo);

编译为

1.  
   @import "foo.css";
2.  
   @import "foo" screen;
3.  
   @import "http://foo.com/bar";
4.  
   @import url(foo);

导入多个文件

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

@import "rounded-corners", "text-shadow";

插值语句

        导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：

1.  
   $family: unquote("Droid Sans");
2.  
   @import url("http://fonts.谷歌apis.com/css?family=\#{$family}");

编译为

@import url("http://fonts.谷歌apis.com/css?family=Droid Sans");

下划线（避免编译）

        Sass可以通过@import导入其他Sass源文件，被导入的文件就是局部文件，局部文件让Sass模块化编写更加容易。

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

示例

        假设我们有一个局部文件： _colors.scss，该文件会被导入到styles.scss文件，然后styles.scss会被编译为styles.css。

_colors.scss文件内容：

1.  
   $primary-color: orange;
2.  
   $secondary-color: gold;

styles.scss使用@import导入局部文件，styles.scss内容如下：

1.  
   @import "colors";
2.  
    
3.  
   body {
4.  
     color: $primary-color;
5.  
     background: $secondary-color;
6.  
   }

使用@import导入局部文件_color.scss时，可以省略下划线和扩展名，即下边两种是一样的：

@import "colors";

@import "_colors.scss"

嵌套

说明

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

        不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

示例

假设 example.scss 文件包含以下样式：

1.  
   .example {
2.  
     color: red;
3.  
   }

然后导入到 #main 样式内

1.  
   #main {
2.  
     @import "example";
3.  
   }

将会被编译为

1.  
   #main .example {
2.  
     color: red;
3.  
   }

这篇好文章是转载于：学新通技术网