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

本文主要是介绍小白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样式优先级测试的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129222

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

Nexus安装和启动的实现教程

《Nexus安装和启动的实现教程》:本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接:DownloadWindows系统根

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

CnPlugin是PL/SQL Developer工具插件使用教程

《CnPlugin是PL/SQLDeveloper工具插件使用教程》:本文主要介绍CnPlugin是PL/SQLDeveloper工具插件使用教程,具有很好的参考价值,希望对大家有所帮助,如有错... 目录PL/SQL Developer工具插件使用安装拷贝文件配置总结PL/SQL Developer工具插

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

Java中的登录技术保姆级详细教程

《Java中的登录技术保姆级详细教程》:本文主要介绍Java中登录技术保姆级详细教程的相关资料,在Java中我们可以使用各种技术和框架来实现这些功能,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录1.登录思路2.登录标记1.会话技术2.会话跟踪1.Cookie技术2.Session技术3.令牌技