小白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;
}
这里我们都定义了一个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