欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-25 15:04:21
...

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

 

@import "../sass/lesson4";

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

 

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

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

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

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

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

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

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

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

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

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

②在标签上直接写样式

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

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

测试下来,结论是 :

在本页面内写样式

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

>  嵌套结构的样式+!important 

非嵌套结构 + !improtant

直接定义在标签上的样式

嵌套结构的样式

>  非嵌套结构的样式

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

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

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

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

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

页面显示的是蓝色

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

挪一下代码的位置

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

页面变成了粉色

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

测试下来,结论是 :

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

(可以自己试一下去掉!important,都有或者都没有important后面的会覆盖前面的,如果前面的有important,后面的没有,那后面的就覆盖不了前面的了)

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

三、!default

sass提供默认值

四、嵌套导入

详情看实例demo

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

相关标签: sass css优先级