SASS 导入@import

最新推荐文章于 2024-05-20 13:07:09 发布

好奇的候选人面向对象

最新推荐文章于 2024-05-20 13:07:09 发布

阅读量108

点赞数

分类专栏： sass 文章标签： sass 前端 css Powered by 金山文档

本文链接：https://blog.csdn.net/qq_22187895/article/details/128943149

版权

9 篇文章 0 订阅

订阅专栏

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;
}

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

@import "public.css";
@import url(public);
@import "http://xxx.com/xxx";
@import 'landscape' screen and (orientation:landscape);

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

如果一个目录正在被Sass程序监测，目录下的所有scss/sass源文件都会被编译，但通常不希望局部文件被编译，因为局部文件是用来被导入到其他文件的。如果不想局部文件被编译，文件名可以以下划线（_）开头

例如：

_theme.scss

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

使用

@import "theme";
.container {
    border-color: $border-color;
    background-color: $background-color;
}

可以看到，@import 引入的theme.scss，可以没有，这是允许的，这也就意味着，同一个目录下不能同时出现两个相关名的sass文件（一个不带，一个带），添加下划线的文件将会被忽略。

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

例如

_base.scss

.main-color {
    color: #F00;
}

使用

.container {
    @import "base";
}

注意：@import不能嵌套使用在控制指令或混入中

关注