使用Sass继承解决同名class选择器导致样式显示不对

最新推荐文章于 2023-03-08 14:09:02 发布
最新推荐文章于 2023-03-08 14:09:02 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： Sass 文章标签： sass css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oHaiKuoTianKong1682/article/details/109113828
版权

从下图红框中可以看到存在多个同名的backImage class选择器
在这里插入图片描述
同名的class选择器的样式全部显示导致显示效果不对。
我们可以通过Sass的继承来解决同名的问题。

继承是SASS中非常重要的一个特性，可以通过@extend指令在选择器之间复用CSS属性，并且不会产生冗余的代码

解决代码如下图所示
在这里插入图片描述
backImage和backImage1都继承自backImage

% 占位符，%xx{}声明的代码，如果不被 @extend 调用的话，不会被编译

干志雄
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react中sass的使用
yezi153的博客
11-17 1975
安装sass依赖包 npm i sass -D 把index.css改成index.scss 导入index.scss文件 注意：如果使用了scss，scss中使用图片的绝对路径的时候需要加上~ background-image: url(~assets/login.png); css-样式污染 这个组件的样式影响其他组件 解决方案 手动处理 （起不同的类名） CSS IN JS： 以js的方式来处理css 。思想是让css有局部作用域全局作用域这样的区分 ...
Sass不同样式风格的输出方法
糖长老莫小贝的博客
03-09 239
[Sass]不同样式风格的输出方法 1.嵌套输出方式 nested 2.展开输出方式 expanded 3.紧凑输出方式 compact 4.压缩输出方式 compressed 1.嵌套输出方式 nested Sass 提供了一种嵌套显示 CSS 文件的方式。例如 nav { ul { margin: 0; padding: 0; list-style: none...
sass语法
kaosini的专栏
10-30 1073
关于sass 3.3.0更新说明——3.3.0 sublime相关插件为：scss语法高亮，sass语法高亮，编译，保存即编译，格式化 文件后缀名 sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议
css基础
zhuoshengda的博客
10-07 478
CSS基础1. 简介:从事网页制作或者相关工作,就要学习HTML,CSS。其中HTML是网页制作的主要语言网页的基础,CSS层叠样式表,主要用来修饰页面的元素CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 简单来说:HTML称之为页面的结构,CSS称之为页面的表现1.1. 体验css大家
如何使用SASS编写可重用的CSS
粉丝们务必加入微信粉丝群
01-07 3515
作者：Obinna Ekwuno 译者：前端小智 来源：proqsolutions 本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。** Sass 是一个CSS预处理程序，至今使用广泛，它之所以...
上班使用less/sass写项目出现样式冲突怎么办
qq_30351747的博客
04-16 1192
上班使用less/sass写项目出现样式冲突怎么办
vue2中使用sass并配置全局的sass样式变量的方法
12-01
 Sass是一种强大的css扩展语言（css本身并不是一门语言），它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言（如Java、C#、Ruby等）有的一些特性，并且完全兼容CSS语法。Sass有助于保持大型样式表结构...
vue多个元素的样式选择器问题
10-15
在Vue.js中，处理多个元素的样式选择器问题是一个常见的需求。这通常涉及到动态地应用样式，以便根据组件状态或数据来改变元素的外观。在给出的示例中，问题是如何根据循环中的索引来为每个元素应用不同的CSS类。...
vue使用Sass时报错问题的解决方法
10-14
在Vue项目中，Sass是一种常用的预处理器，它允许开发者使用更高级的语法来编写CSS。然而，在实际开发过程中，可能会遇到Vue使用Sass时的报错问题。本篇文章将详细解析这类问题的原因并提供相应的解决策略。 首先，...
Sass(Scss) 学习笔记（一）--- 变量和嵌套
weixin_45092437的博客
01-02 2432
一、概念 ​ Sass（Syntactically Awesome StyleSheets）是 CSS的一款预处理器，能完全兼容CSS3的语法，在CSS 语法的基础上增加了变量的、混合、导入等概念，利用嵌套语法的方式，大大减少了 CSS 重复代码的书写，提高项目的开发效率。 ​ Sass有两种语法格式：Sass 和 Scss，其中Scss（Sassy CSS）是在CSS3的基础上进行扩展，加入一些Sass特有的功能，所有的CSS3语法都可以使用，而且支持浏览器前缀写法，扩展名为.scss，是本文所讲述语
Sass和Less的区别
q2235141的博客
04-29 392
一、sass与less的区别： 1.实现方式： Less是基于JavaScript，是在客户端处理的 Sass是基于Ruby的，是在服务器端处理的 2.变量： Less: @ Sass: $ 3.Sass比Less扩展语法多 二、less 1.变量：@name 2.混合：定义.class{} 、 使用 .class() 3.嵌套：.class{.class{}} 4.注释：/***/ , // 5...
scss语法，使用for循环批量设置class类
qq_17335549的博客
03-08 2514
scss语法，使用for循环批量设置class类
sass笔记-3|Sass基础语法之样式复用和保持简洁
weixin_34090643的博客
12-05 241
2019独角兽企业重金招聘Python工程师标准>>> ...
解决vue组件间相同命名的class样式干扰的问题
看门猫的博客
02-12 4874
解决vue组件间相同命名的class样式干扰的问题问题描述解决办法使用scoped使用scss 问题描述 比如在文件a.vue中，有以下样式： <style> . .main { height: 38px; } </style> 在文件b.vue中，有以下样式： <style> . .main { height...
sass基础知识
jiangyoufu123456789的博客
02-28 221
1. 变量 声明变量，作用域只在当前{ }之中有效，当前{ }之外效果。 $link-text { color: #1890ff } 变量引用 $link-text { color: #1890ff } .parent-dom { li { border: 1px solid $link-text } } 变量名用中划线还是下划线分隔：都可以使用，建议用中划线。 $link-color: blue; 2.嵌套规则 父
[Sass]嵌套
weixin_33922670的博客
12-09 372
[Sass]嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类...
css代码优化篇
weixin_34163553的博客
04-03 239
心情比较不咋地，不想说什么了 代码演示如下： 不推荐 .fw-800{ font-weight:800; } .red { color:red; } 推荐 .heavy { font-weight:800; } .important { color:red; } 合理的避免使用ID 一般情况下ID不应该被应用于样式。ID的样...
Sass详解
热门推荐
RayShyy的博客
04-27 1万+
1. 什么是Sass? Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 2. 为什么使用Sass？ 它能够帮我们更快更高效的编写更好维护的 css； Sass 引入合理的样式复用机制，可以节约很多时间来重复。 Sass的好处当然不仅于此，当你使用之后便会发现其中的妙处。 3. Sass语法 3.1 变量 变量可以存储样式信息，以便后面使用。 比如一个样式在页面的多个地方使
vue 项目中 sass 如何复用？
浮生的博客
09-23 663
前言：vue项目中，我们在使用scss编写代码的时候，有些时候可能会有很多样式代码是重复的，这个时候我们可以把公共的部分提取出来，文件结构如下图： 步骤1： 在assets目录下新建css目录，存放css资源，在css目录下新建styles.scss 文件，编写代码如下： @mixin publicCss($width,$height){ //publicCss是css方法； $width和$height是入参变量,动态变化 .childBox { > div {
怎么使用深度选择器解决antdv4 无法修改modal里的select样式的问题？
最新发布
07-15
要使用深度选择器（Deep Selector）来解决 Ant Design Vue 4（antdv4）中无法修改 Modal 弹框中 `<a-select>` 组件样式的问题，你可以在样式中使用 `/deep/` 或者 `>>>` 来穿透 CSS 作用域，直接修改组件内部的样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值