小白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;