本文主要是介绍小白Sass教程---通过实例学Sass--第五讲--scss文件导入及Sass样式优先级测试，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、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
这篇关于小白Sass教程---通过实例学Sass--第五讲--scss文件导入及Sass样式优先级测试的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
