小白Sass教程---通过实例学Sass--第五讲--scss文件导入及Sass样式优先级测试

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013253924/article/details/82149287

一、sass提供导入机制，可以将页面的共用较为通用的scss提取出来，这样方便维护，其他页面按需导入相关的scss文件，避免了所有的样式都在一个样式文件中，一个样式文件较为繁重难以维护。

@import "../sass/lesson4";

这样就导入了lesson4这个scss文件，可以使用其中的样式。

二、测试一下样式应用的优先级

1、本文件下：嵌套结构、非嵌套结构

在本页面内的<style></style>标签内直接写样式，测试一下嵌套结构和非嵌套结构会应用哪个样式

.lesson4{
  .test1{
    color: #f527e7;
  }
}
.test1{
  color: #1e18f5;
}

这里我们都定义了一个test1的样式，结果页面应用的是嵌套结构中的，改变.test1的位置还是一样的。

① 稍微改一下，将非嵌套的优先级置高

.lesson4{
  .test1{
    color: #f527e7;
  }
}
.test1{
  color: #1e18f5 !important;
}

 

②在标签上直接写样式

 

测试下来，结论是 ：

在本页面内写样式

直接定义在标签上的样式+！important 

>  嵌套结构的样式+！important 

>  非嵌套结构 + ！improtant

>  直接定义在标签上的样式

>  嵌套结构的样式

>  非嵌套结构的样式

经过测试，嵌套在内部的样式比散落在外面的样式优先级要高，问题来了，如果同是嵌套，那么会应用哪一个嵌套的样式呢？

.lesson4{
  .test1{
    color: #f527e7 !important;
  }
  .test2{
    color: #f527e7 !important;
  }
}
.test1{
  color: #1e18f5 !important;
}
.lesson4-inside{
  .test2{
    color: #1e18f5 !important;
  }
}

 

我们嵌套定义了test2的样式 ，一个粉色，一个蓝色

 

页面显示的是蓝色

挪一下代码的位置

页面变成了粉色

测试下来，结论是 ：

同是嵌套结构，以最后的定义为准，后定义的会覆盖前面的定义

（可以自己试一下去掉！important，都有或者都没有important后面的会覆盖前面的，如果前面的有important，后面的没有，那后面的就覆盖不了前面的了）

加入导入的文件也有定义重复的样式，那就要看导入的位置了，如果在最后倒入就会应用导入的样式，如果最开始就导入，就会被覆盖。

三、！default

sass提供默认值

四、嵌套导入

详情看实例demo