【SASS/SCSS(一)】选择器

Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式。

而SCSS是SASS引入的语法,是CSS的超集,所以所有CSS有效的使用在SCSS中都生效

一、回顾CSS选择器

  • 通用选择器 *
  • 元素选择器
  • 类选择器,.className
  • ID选择器,#id
  • 属性选择器,对元素中某个属性的值进行筛选,语法有:[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
  • 逗号分隔的选择器列表
  • 空格代表的后代选择器
  • > 代表的直接后代选择器
  • ~ 代表所有后面的兄弟节点选择器
  • + 代表后面直接跟着的第一个兄弟节点选择器
  • || 列组合器,例如 col || td代表<col>该列域下的所有td结点
  • 伪类/伪元素选择器

具体参见MDN文档:

CSS 选择器 - CSS:层叠样式表 | MDN (mozilla.org)

二、SCSS利用嵌套语法实现选择器

SCSS为了优化CSS的语法表达,使其更简洁、避免重复定义样式,因此实现了嵌套语法来对元素进行选择。例如:

//对ul中的直接后代进行筛选,定制了直接后代中li的样式
ul > {li {list-style-type: none;}
}//h2选择紧邻兄弟p元素
h2 {+ p {border-top: 1px solid gray;}
}//p元素的所有一般兄弟元素中,选择出span / h1定制样式
p {~ {span {opacity: 0.8;},h1 {color: red;}}
}

由于嵌套语法,父选择器的很多属性可以不被反复定义,同时使得选择器的实现更直观、更灵活

三、父选择器

Sass中利用 & 来指示父选择器,这样在嵌套语法中,可以更方便地复用父选择器

同时,还可以在父选择器的基础上添加后缀,更便捷地寻找基于父选择器的命名【但并非父子关系】

添加后缀时,父选择器必须是字母/数字结尾的(例如以 ID 、className、元素标签定义的父类),才可以添加后缀

.alert {max-width: 600px;margin: 4rem auto;width: 90%;font-family: "Raleway", sans-serif;background: #f4f4f4;//定义该元素伪类的CSS&:hover {font-weight: bold;}//添加后缀&__copy {display: none;padding: 1rem 1.5rem 2rem 1.5rem;color: gray;line-height: 1.6;font-size: 14px;font-weight: 500;&--open {display: block;}}}

嵌套语法需要区分的部分!构成父子关系的选择器 以及 只是复用名称的选择器!

//SASS
.btn {color: red;//后代选择器a{color:white;}//复用的时候要自己再构造一遍需要的后代选择器& &-item{color:purple;}//平级,只是名称做了复用&-item {color: black;&-green {color: green}}
}//等价CSS
.btn {color: red;
}.btn a {color: white;
}.btn .btn-item {color: purple;
}.btn-item {color: black;
}.btn-item-green {color: green;
}

如果基于选择器列表,& 获取父选择器代表什么呢? 

&可以理解为所有父级选择器结构的引用,举几个例子,看看SASS该写法下css的等价内容:

1、

//scss
.main aside:hover,
.sidebar p {parent-selector: &;// => ((unquote(".main") unquote("aside:hover")),//     (unquote(".sidebar") unquote("p")))
}//等价css
.main aside:hover,
.sidebar p {parent-selector: .main aside:hover, .sidebar p;
}

2、

//scss
ul, ol {text-align: left;& & {padding: {bottom: 0;left: 0;}}
}//css
ul, ol {text-align: left;
}
ul ul, ol ol {padding-bottom: 0;padding-left: 0;
}

在这个例子中值得注意的是,有相同前缀的css属性例如padding-*、margin-*等,可以在书写时以嵌套语法的形式拆分

3、如果父选择器是类选择器,可以利用其构造新的选择器,并提取到顶层

//scss
.selector {color: blue;//利用表达式的写法构造@at-root #{a + &} {color: red;}
}//等价css
.selector {color: blue;
}
a.selector {color: red;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/47546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【细如狗】记录一次使用MySQL的Binlog进行数据回滚的完整流程

文章目录 1 事情起因2 解决思路3 利用binlog进行数据回滚3.1 确认是否启用Binlog日志3.2 确认是否有binlog文件3.3 找到误操作的时间范围3.4 登录MySQL服务器查找binlog文件3.4.1 查询binlog文件路径3.4.2 找到binlog文件3.4.3 确认误操作被存储在哪一份binlog文件中 3.5 查看二…

库卡机器人示教器 KPC2 00107-264 KPC200.107-264

库卡驱动器是一种高性能的控制器&#xff0c;其作用类似于变频器在普通交流马达中的应用。它通过位置、速度和力矩三种方式对伺服马达进行控制&#xff0c;以满足各种高精度定位系统的需求。库卡驱动器是伺服系统的重要组成部分&#xff0c;广泛应用于各种工业自动化领域。 库…

用杰理芯片发不出100hz~1200hz频率的PWM波

思路&#xff1a; 问原厂工程师 回复&#xff1a; 看下是不是数据做除法的时候越界了&#xff0c;如果有用户手册&#xff0c;直接看下那几个定时器的寄存器算下就知道为什么 芯片&#xff1a; AD155A 行动&#xff1a; 相关文档和代码&#xff1a; TMR_PR&#xff1a;1…

打卡WAIC 2024!中兴的AI科技好牛

前几天去现场参观了2024世界人工智能大会展览&#xff08;WAIC 2024&#xff09;&#xff0c;突然感受到AI浪潮真的是在正在汹涌而来&#xff0c;大会上聚集了全球各种大型科技企业&#xff0c;“黑科技”一个接一个。中兴作为咱们中国企业&#xff0c;在这场大会上也很争气&am…

MySQL双主双从实现方式

双主双从&#xff08;MM-SS&#xff09; 前言 避免单一主服务器宕机&#xff0c;集群写入能力缺失 从 1 复制 主1 &#xff0c;从 2 复制 主 2 主 1 复制 主 2&#xff0c;主 2 复制主 1 也就是 主 1 和主 2 互为主从。主1主2互为主从&#xff0c; 是为了以下情景&#xff0c…

Spring-cloud-openfeign-@FeignClient中的configuration属性

FeignClient注解中的configuration属性就是设置相关配置&#xff0c;但是这个属性写的非常的不好&#xff0c;而且在它的注释中也没有写全&#xff0c;所以本文记录一下&#xff0c;当我们的代码如下时&#xff1a; FeignClient(name "xxx", configuration Abc.cl…

git使用以及理解

git练习网站 Learn Git Branching git操作大全Oh Shit, Git!?! git commit git branch name git merge bugFix 合并俩个分支 git rebase main git checkout headgit switch head 会导致HEAD分离 &#xff0c;就是指head->HEAD->c1 相对引用 ------------------- …

vue使用audio 音频实现播放与关闭(可用于收到消息给提示音效)

这次项目中因为对接了即时通讯 IM&#xff0c;有个需求就是收到消息需要有个提示音效&#xff0c;所以这里就想到了用HTML5 提供的Audio 标签&#xff0c;用起来也是很方便&#xff0c;首先让产品给你个提示音效&#xff0c;然后你放在项目中&#xff0c;使用Audio 标签&#x…

卡片式组件封装demo

效果视频&#xff1a; 卡片组件 样式还得细调~&#xff0c;时间有限&#xff0c;主要记录一下逻辑。 html结构&#xff1a; 目录 父组件数据处理数据格式 父组件的全部代码 子组件数据处理props参数 样式部分三个圆点点击三圆点在对应位置显示查看弹框点击非内容部分隐藏查看…

PHP连接MySQL数据库

PHP本身不具备操作MySQL数据库的能力&#xff0c;需要借助MySQL扩展来实现。 1、PHP加载MySQL扩展&#xff1a;php.ini文件中。&#xff08;不要用记事本打开&#xff09; 2、PHP中所有扩展都是在ext的文件夹中&#xff0c;需要指定扩展所在路径&#xff1a;extension_dir。 3、…

Linux 之 ln 硬链接和软链接

ln 语法 ln 命令用于创建链接&#xff0c;可以创建硬链接或符号链接。以下是 ln 命令的基本语法&#xff1a; ln [OPTION]... TARGET LINK_NAMETARGET&#xff1a;指定链接的目标文件或目标目录。LINK_NAME&#xff1a;指定要创建的链接的名称。 常用选项包括&#xff1a; …

探索未来机器人产业发展机遇:多元化增长与技术创新的双重驱动

在全球与中国机器人市场持续蓬勃发展的背景下&#xff0c;机器人产业正展现出前所未有的活力与潜力。从全球视角来看&#xff0c;机器人市场持续保持增长态势&#xff0c;特别是人形机器人作为新兴领域&#xff0c;其市场规模的迅速扩大预示着机器人产业正向着更加智能化、人性…

小抄 20240713

1 很多人在搭建人脉上有一个误区&#xff0c;怕给人添麻烦。 其实&#xff0c;适度麻烦别人&#xff0c;帮助有来有往&#xff0c;关系才能更稳固&#xff0c;不添麻烦和不联系差不多&#xff0c;双方的关系基本靠猜&#xff0c;等到再联系&#xff0c;不麻烦也成了大麻烦。 …

win10 langchain-chatchat-0.3.1安装及测试

git clone https://github.com/chatchat-space/Langchain-Chatchat.git conda create -n langchain3 python3.11 conda activate langchain3 xinference安装用另一篇文章的内容处理。 pip install langchain-chatchat -U -i https://pypi.tuna.tsinghua.edu.cn/simple pip in…

Linux常用命令(简要总结)

Linux常用命令 Linux 是一个强大的操作系统&#xff0c;广泛应用于服务器、开发和嵌入式系统中。掌握一些常用的 Linux 命令对于高效地使用系统至关重要。以下是一些常用的 Linux 命令及其简要说明&#xff1a; 文件和目录操作 ls&#xff1a;列出目录内容 ls ls -l # …

Mysql的语句执行很慢,如何分析排查?

1、检查服务器性能是否存在瓶颈 如果系统资源使用率比较高&#xff0c;比如CPU,硬盘&#xff0c;那访问肯定会慢&#xff0c;如果你发现是Mysl占比比较高&#xff0c;说明Mysql的读写频率高&#xff0c;如果本身网站访问量不大&#xff0c;说明你的sql参数&#xff0c;sql语句查…

C++代码_让室友坑我

引子 今天古文波在外地上C集训营&#xff0c;结果却被一起学习的室友坑了。啊&#xff0c;好气&#xff0c;我要报复室友。 所以&#xff0c;我写出了死亡代码。 如果你也想报复某些人&#xff0c;可以看下去。 代码构造&#xff1a; 头文件 想要使用一些函数&#xff0c;如…

【STC89C51单片机】串口通信

【STC89C51单片机】串口通信 串口简介1. 串口接线方式2. 通信过程 相关寄存器1. SBUF&#xff08;Serial Buffer Register&#xff09;2. SCON&#xff08;Serial Control Register&#xff09;3. PCON&#xff08;Power Control Register&#xff09;4. TCON&#xff08;Timer…

记录些Redis题集(4)

Redis 通讯协议(RESP) Redis 通讯协议&#xff08;Redis Serialization Protocol&#xff0c;RESP&#xff09;是 Redis 服务端与客户端之间进行通信的协议。它是一种二进制安全的文本协议&#xff0c;设计简洁且易于实现。RESP 主要用于支持客户端和服务器之间的请求响应交互…

第 8 章 虚拟文件系统(2)

目录 8.3 VFS结构 8.3.1 结构概观 8.3.2 inode 本专栏文章将有70篇左右&#xff0c;欢迎关注&#xff0c;查看后续文章。 8.3 VFS结构 8.3.1 结构概观 VFS组成部分&#xff1a; 1. 文件。 2. 文件系统。 1. 文件的表示 inode&#xff1a;包含文件信息及数据存储位置。 上…