导入sass文件

Posted wangluochong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导入sass文件相关的知识,希望对你有一定的参考价值。

4导入sass文件

sass@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。

sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。

2 默认变量值

!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。与css 中 !important 相反作用

3.你不能用sass@import直接导入一个原始的css文件,因为sass会认为你想用css原生的@import。但是,因为sass的语法完全兼容css,所以你可以把原始的css文件改名为.scss后缀,即可直接导入了

4.静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

当注释出现在原生css不允许的地方,如在css属性或选择器中,sass将不知如何将其生成到对应css文件中的相应位置,于是这些注释被抹掉。


如果需要导入 SCSS 或者 Sass 文件,但又不希望将其编译为 CSS,只需要在文件名前添加下划线,这样会告诉 Sass 不要编译这些文件,但导入语句中却不需要添加下划线。

例如,将文件命名为 _colors.scss,便不会编译 _colours.css 文件。

@import "colors";

上面的例子,导入的其实是 _colors.scss 文件

注意,不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略

 

 

sass的导入( @import)规则和CSS的有所不同,编译时会将 @import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如 @import ‘reset.css‘,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头,如 _mixin.scss。这种文件在导入的时候可以不写下划线,可写成 @import "mixin"




以上是关于导入sass文件的主要内容,如果未能解决你的问题,请参考以下文章

gulp-sass @import CSS 文件

导入sass文件

将 json 数据作为 .scss 文件中的 sass 变量导入 Nuxt

Sass中如何导入文件

如何从 node_modules 文件夹导入 sass 主题模块

导入的Sass文件找不到字体文件