Sass中如何使用选择器继承来精简CSS详细教程

文章目录

  • 前言
  • 使用选择器继承来精简CSS
  • 何时使用继承
  • 继承的高级用法
  • 继承的工作细节
  • 使用继承的最佳实践
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:Sass和Less
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

使用选择器继承来精简CSS

使用sass的时候,最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念,选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现,如下代码:

//通过选择器继承继承样式
.error {border: 1px red;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}

在上边的代码中,.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class=“seriousError” 修饰的html元素最终的展示效果就好像是class=“seriousError error”。相关元素不仅会拥有一个3px宽的边框,而且这个边框将变成红色的,这个元素同时还会有一个浅红色的背景,因为这些都是在.error里边定义的样式。

.seriousError不仅会继承.error自身的所有样式,任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承,如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError acolor: red;font-weight: 100;
}
h1.error { //应用到hl.seriousErrorfont-size: 1.2rem;
}

如上所示,在class="seriousError"的html元素内的超链接也会变成红色和粗体。

本节将介绍与混合器相比,哪种情况下更适合用继承。接下来在探索继承的工作细节之前,我们先了解一下继承的高级用法。最后,我们将看看使用继承可能会有哪些坑,学习如何避免这些坑。

何时使用继承

因为继承是基于类的(有时是基于其他类型的选择器),所以继承应该是建立在语义化的关系上。当一个元素拥有的类(比如说.seriousError)表明它属于另一个类(比如说.error),这时使用继承再合适不过了。

这有点抽象,所以我们从几个方面来阐释一下。想象一下你正在编写一个页面,给html元素添加类名,你发现你的某个类(比如说.seriousError)是另一个类(比如说.error)的细化。你会怎么做?

你可以为这两个类分别写相同的样式,但是如果有大量的重复怎么办?使用sass时,我们提倡的就是不要做重复的工作。
你可以使用一个选择器组(比如说.error.seriousError)给这两个选择器写相同的样式。如果.error的所有样式都在同一个地方,这种做法很好,但是如果是分散在样式表的不同地方呢?再这样做就困难多了。
你可以使用一个混合器为这两个类提供相同的样式,但当.error的样式修饰遍布样式表中各处时,这种做法面临着跟使用选择器组一样的问题。这两个类也不是恰好有相同的样式。你应该更清晰地表达这种关系。
综上所述你应该使用@extend。让.seriousError.error继承样式,使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用.error.seriousError都会继承其中的样式。

继承的高级用法

任何css规则都可以继承其他规则,几乎任何css规则也都可以被继承。大多数情况你可能只想对类使用继承,但是有些场合你可能想做得更多。最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对html元素添加的所有样式都会被继承。

接下来的这段代码定义了一个名为disabled的类,样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现:

.disabled {color: gray;@extend a;
}

假如一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式。举例来说, 如果.seriousError@extend.important.error , 那么.important.error h1.important.error 的样式都会被.seriousError继承, 但是.important或者.error下的样式则不会被继承。这种情况下你很可能希望.seriousError能够分别继承.important或者.error下的样式。

如果一个选择器序列(#main .seriousError)``@extend另一个选择器(.error),那么只有完全命中#main .seriousError这个选择器的元素才会继承.error的样式,就像单个类名继承那样。拥有class="seriousError"的.main元素之外的元素不会受到影响。

#main .error这种选择器序列是不能被继承的。这是因为从#main .error中继承的样式一般情况下会跟直接从.error中继承的样式基本一致,细微的区别往往使人迷惑。

现在你已经了解了通过继承能够做些什么事情,接下来我们将学习继承的工作细节,在生成对应css的时候,sass具体干了些什么事情。

继承的工作细节

跟变量和混合器不同,继承不是仅仅用css样式替换@extend处的代码那么简单。为了不让你对生成的css感觉奇怪,对这背后的工作原理有一定了解是非常重要的。

@extend背后最基本的想法是,如果.seriousError @extend .error, 那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。当.error出现在复杂的选择器中,比如说h1.error.error a或者#main .sidebar ``input.error[type="text"],那情况就变得复杂多了,但是不用担心,sass已经为你考虑到了这些。

关于@extend有两个要点你应该知道。

跟混合器相比,继承生成的css代码相对更少。因为继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度,请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时,并且这两个不同的css规则对同一属性的修饰存在不同的值,css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出,如果权重相同,定义在后边的规则胜出。
混合器本身不会引起css层叠的问题,因为混合器把样式直接放到了css规则中,而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题,但是知道这点总没有坏处。

使用继承的最佳实践

通常使用继承会让你的css美观整洁。因为继承只会在生成css时复制选择器,而不会复制大段的css属性。但是如果你不小心,可能会让生成的css中包含大量的选择器复制。

避免这种情况出现的最好方法就是不要在css规则中使用后代选择器(比如.foo .bar)去继承css规则。如果你这么做,同时被继承的css规则有通过后代选择器修饰的样式,生成css中的选择器的数量很快就会失控:

.foo .bar { @extend .baz; }
.bip .baz { a: b; }

在上边的例子中,sass必须保证应用到.baz的样式同时也要应用到.foo .bar(位于class="foo"的元素内的class="bar"的元素)。例子中有一条应用到.bip .baz(位于class="bip"的元素内的class="baz"的元素)的css规则。当这条规则应用到.foo .bar时,可能存在三种情况,如下代码:

<!-- 继承可能迅速变复杂 -->
<!-- Case 1 -->
<div class="foo"><div class="bip"><div class="bar">...</div></div>
</div>
<!-- Case 2 -->
<div class="bip"><div class="foo"><div class="bar">...</div></div>
</div>
<!-- Case 3 -->
<div class="foo bip"><div class="bar">...</div>
</div>

为了应付这些情况,sass必须生成三种选择器组合(仅仅是.bip .foo .bar不能覆盖所有情况)。如果任何一条规则里边的后代选择器再长一点,sass需要考虑的情况就会更多。实际上sass并不总是会生成所有可能的选择器组合,即使是这样,选择器的个数依然可能会变得相当大,所以如果允许,尽可能避免这种用法。

值得一提的是,只要你想,你完全可以放心地继承有后代选择器修饰规则的选择器,不管后代选择器多长,但有一个前提就是,不要用后代选择器去继承。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

和鲸ModelWhale平台与海光人工智能加速卡系列完成适配认证,夯实 AI 应用核心底座

AIGC 浪潮席卷&#xff0c;以大模型为代表的人工智能发展呈现出技术创新快、应用渗透强、国际竞争激烈等特点。创新为本&#xff0c;落地为王&#xff0c;技术的快速发展与大规模训练需求的背后&#xff0c;是对平台化基础设施与 AI 算力的更高要求。在此全球 AI 产业竞争的风口…

BI报表用多了,就再看不了其他报表

BI报表有魔力&#xff0c;一旦用多了&#xff0c;就再也接受不了其他的报表。为什么&#xff1f;我这就来总结说说。 1、分析的效率 一般报表&#xff1a;要做报表&#xff0c;先找IT取数&#xff0c;然后开发&#xff0c;分析过程中有新需求&#xff0c;不好意思&#xff0c…

六道经典的选择结构题型

1. 判断一个数是奇数还是偶数 #include <stdio.h> int main() { int num; printf("请输入一个整数&#xff1a;"); scanf("%d", &num); if (num % 2 0) { printf("%d是偶数\n", num); } else { …

Vue组件库推荐:Element UI深度解析

在Vue开发中&#xff0c;使用组件库可以极大地提高开发效率&#xff0c;减少重复工作量。Element UI作为一款优秀的Vue组件库&#xff0c;被广泛应用于各类项目中。本文将对Element UI进行深度解析&#xff0c;为开发者提供详细的使用说明和具体的代码示例。 1&#xff0c;Ele…

fatal: refusing to merge unrelated histories報錯咋辦

在 Git 中&#xff0c;如果要合并两个分支&#xff0c;而这两个分支的历史记录不相交&#xff0c;就会出现错误&#xff1a;fatal: refusing to merge unrelated histories。 要解决这个问题&#xff0c;有以下几种方法&#xff1a; 首先&#xff0c;检查一下你正在合并的两个…

网络篇---第三篇

系列文章目录 文章目录 系列文章目录前言一、说一下HTTP的长连接与短连接的区别二、TCP 为什么要三次握手,两次不行吗?为什么?三、说一下 TCP 粘包是怎么产生的?怎么解决粘包问题的?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大…

GNSS接收机 高精度GNSS接收机 4GGNSS接收机

GNSS接收机TN521 ★多频多系统个高精度定位&#xff0c;支持GPS L1/L2&#xff0c;BD B1/B2&#xff0c;支持北斗三代 ★外置GNSS、4G天线 ★平面精度2.5mm 1ppm RMS&#xff0c;高程精度511ppm RMS ★监测终端内嵌工业级智能平台 ★支持4G全网通、全面支持移动/联通/电信…

Python编写的爬虫:为什么受到如此的欢迎?

目录 一、引言 二、Python爬虫受欢迎的原因 1、语言简洁易读 2、强大的数据处理能力 3、丰富的网络爬虫库 4、跨平台性 5、社区支持与资源丰富 三、Python爬虫应用案例 四、总结 一、引言 在当今的大数据时代&#xff0c;信息获取和数据处理能力对于企业和个人来说至…

UEditor编辑器实现上传图片自动加水印功能PHP源码

UEditor编辑器是百度旗下的免费开源富文本编辑器,使用很方便,但是也有缺点,比如,上传图片不能自动添加水印,下边我们就来说说如何在UEditor编辑器中自动实现上传图片添加水印功能,操作很简单。 首先找到UEditor/PHP目录下的Uploader.class.php的文件,打开该文件,找到以…

linux下磁盘分区、挂载实操

文章目录 一、磁盘分区1.查看磁盘分区情况2.使用fdisk进行分区&#xff08;2T以下&#xff09;3.删除分区4.使用parted对磁盘进行分区&#xff08;大于2T&#xff09; 二、磁盘格式化1.格式化文件系统2.关闭文件系统自检3.禁止检查磁盘文件系统&#xff0c;开机修复错误 三、磁…

帮管客CRM 文件上传漏洞复现

0x01 产品简介 帮管客CRM是一款集客户档案、销售记录、业务往来等功能于一体的客户管理系统。帮管客CRM客户管理系统&#xff0c;客户管理&#xff0c;从未如此简单&#xff0c;一个平台满足企业全方位的销售跟进、智能化服务管理、高效的沟通协同、图表化数据分析帮管客颠覆传…

【数字化转型方法论读书笔记】-数据中台落地实施之法

让数据中台真正落地是实现数字化转型的重中之重。企业做好数据治理、体系建设及人才配备等前期工作后&#xff0c;接下来要做的是数据中台实施落地的关键。 企业首先要掌握数据中台建设的三大核心要素&#xff1a;选对数据建设方式、厘清建设思路、避开数据中台建设误区&#…

Linux(CentOS7.5):硬盘分区纪实

一、服务器概述 1、既有一块系统硬盘&#xff0c;新增一块100G硬盘。 2、要求&#xff0c;将新插入硬盘分为&#xff1a;20G、30G、50G。 二、操作步骤 1、确认新硬盘是否插入成功&#xff1a; fdisk -l# 红色框出来的&#xff0c;为识别出来的新硬盘信息 # 黄色框出来的&#…

【刷题笔记】接雨水||暴力通过||符合思维方式

接雨水 文章目录 接雨水1 题目描述2 分析2.1 左到右2.2 右到左2.3 计算面积 3 代码3.1 Java3.2 Python 附录1 1 题目描述 https://leetcode.cn/problems/trapping-rain-water/ 面试的时候关键不是你的手法多么精妙&#xff0c;首先要做出来。 给定 n 个非负整数表示每个宽度为…

如何避免光模块接口受到污染?

光模块作为光通信领域一个重要的配件&#xff0c;实现光电和电光的转换&#xff0c;和光纤连接&#xff0c;承载了数据流量的快速转换与传输。因而在整个网络体系中&#xff0c;起着至关重要的作用。虽然光模块在使用过程中&#xff0c;不像交换机和服务器等网络设备一样需要经…

前端常用工具函数

// 将数字逗号3位数分割 例如 10000分隔10,000.00 numberFormatter(number) {if (number) {const fixedNumber number.toFixed(2);const parts fixedNumber.split(.);parts[0] parts[0].replace(/\B(?(\d{3})(?!\d))/g, ,);return parts.join(.);} else {return 0.00}}

MacOS14 Sonoma 安装 Flutter 开发环境

本文针对 小白用户也包括自己&#xff0c;以前都是将这些写入我的有道云笔记。为了让给多人看见或者说自己更好的浏览&#xff0c;先将其记录如下。 朋友介绍一个项目说要开发一款App&#xff0c;最近也是闲着就答应下来。主要功能是通过蓝牙BLE控制设备的一个 Iot边缘设备&…

echarts 自定义提示样式

在setOption中添加自定义样式 tooltip: {trigger: axis,formatter: (params)> {// console.log(params);var result if(params[0] && params[1]){result 发电量对比<div style"background:#F4F7FC;padding:5px;margin:5px 0px;border-radius:6px"&…

如何在vs2017及以前版本(vs2010、vs2015)上添加 添加类型库中的MFC类

有时候当我们新建MFC工程需要使用到微软的一些自带控件&#xff0c;如播放视频要用到Windows media player控件&#xff0c;这时&#xff0c;我们可以通过添加“ActiveX控件中的mfc类(A)”这一选项. 还有有时候我们需要用到“类型库中的MFC类(T)及“MFC ODBC使用者(O)”。那我们…

记录本地与服务器之间数据传输方法(上传、下载文件)

文章目录 一、使用scp命令实现参数说明示例说明 二、使用工具实现windows系统苹果系统如有启发&#xff0c;可点赞收藏哟~ 一、使用scp命令实现 scp 是 secure copy &#xff08;安全复制&#xff09;的缩写, scp 是基于 ssh 登陆进行安全的远程文件拷贝命令。相当于 cp 命令 …