关于样式穿透和less、sass

最新推荐文章于 2024-06-07 15:12:18 发布
最新推荐文章于 2024-06-07 15:12:18 发布
阅读量840 收藏 3
点赞数 1
文章标签： sass less css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bbt953/article/details/123089633
版权 
/*
	之前写h5端的时候，用的sass，样式穿透用/deep/死都不生效
	现在写pc端，用的less，样式穿透又死了，不肯生效	

	我终于知道了，如果样式用的sass,样式穿透就要用  ::v-deep
	如果样式用的less，样式穿透就要用  /deep/
*/
湛海不过深蓝
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
-Versos:vue3使用模板，TemplateTSX或Sassless Stylus样式的组件以及PWA和RxJS
04-06
Vue 3 +打字稿+ Vite2 + Sass +更少+样式组件+手写笔+ TSX + PWA + RxJx 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental....
Vue项目中less实现样式穿透
热门推荐
m0_56026872的博客
07-07 1万+
今天在看一个慕课网上的视频时，遇到了一个小问题，问题是在我们使用轮播图插件vue-awesome-swiper时，发现轮播图分页器pagination的当前页的小圆点显示为蓝色，但是设计稿中显示为白色，效果如图 因为在当前组件中的样式，我们使用了scoped属性锁定了样式作用域，所以我们要想修改这个样式就需要一些特殊设置，在视频中使用是stylus，所以它使用的是stylus的样式穿透 stylus样式穿透 >>> .wrapper >>> .swiper-p
less 穿透子组件、孙组件样式
m0_37616866的博客
03-18 966
总结： 再less中， 一个/deep/ 表示一层穿透，如果有多个组件嵌套，使用不同个数的/deep/ 实现样式重构的效果。
scss使用样式穿透动态控制el-dialog的样式
最新发布
AM1n98的博客
06-07 711
上午在做一个弹窗el-dialog，需要展示导入的失败信息。需求如下：（1）导入限制只能导入模板格式的Excel表，不能导入其他格式文件，否则弹框报错提示：导入失败，请下载模板填写后导入。（2）导入行数限制500行，若超过则无法导入，弹框报错提示：单次导入不能超过500行，请修改行数。（3）导入时，若某行用户账号已存在于政企版用户列表，则该行不导入，其余行导入，弹框提示：总共X行，其中Y行导入失败，其余X-Y行导入成功。失败详情：第1行导入失败，用户账号18800001111已存在；
less和scss样式穿透的三种写法
weixin_56993654的博客
08-28 4961
1. ::v-deep 在scss中使用 <style scoped lang="scss"> ::v-deep img{ width: 100px; height: 100px; } </style> 2. >>> 在less中使用 <style scoped lang="less"> >>> img{ width: 100px; height: 100px; } ..
less基础
weixin_46048542的博客
02-26 900
1、介绍是css预处理语言，让css更强大，可以实现在less里面定义变量函数运算等2、less默认浏览器不识别less转成csS(框架: less/sass 框架的内置了转码less-css)3、使用语法1.创建less文件xxx.less 后缀.less2. less编译成css 再引入页面上4、如何编译less方法1:安装less命令工具通过命令执行less转成css1.项目中安装less2.转文件编译在命令窗口方法2（推荐安装插件。
vue less 样式穿透写法（个人实战）
q915730058的博客
12-29 3499
刚开始，我网上一直找，搞不懂，可能我的方法有问题，所以写下，以swiper 来做例子 1.html 数据结构 <template> <div class="slite-box" v-show="show" @click="handleClick"> <div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper"> <div class=..
解决vue加scoped后就无法修改vant的UI组件的样式问题
10-14
如果使用了像Less或Sass这样的预处理器，由于它们可能不支持`>>>`，你可以使用`/deep/`或`::v-deep`。例如： ```less .van-radio { /deep/ .van-radio__label { width: 500px; } } ``` 除了这个主要问题，还有...
vue学习日记17：scoped样式冲突
03-21
4. **CSS预处理器（如Sass、Less）**：在使用预处理器时，有时会遇到嵌套规则导致的样式冲突。预处理器的嵌套规则可能会生成更具体的选择器，从而提高样式优先级。要避免这种情况，可以调整预处理器的写法，或者使用...
astroturf:那些想要全部的“人工” CSS-in-JS
04-27
使用现有的工具-Sass，PostCSS，Less-但仍将样式定义写入JavaScript文件中 整个组件在单个文件中。 用模板文字编写CSS，然后像在单独文件中一样使用它 与Preact配合使用 与Next.js一起使用 不带Webpack使用 用法 ...
vue-20210304_kiphirrr
03-10
3. **CSS预处理器**：Vue.js支持如Sass、Less等CSS预处理器，通过配置webpack或Vue CLI，可以在项目中使用预处理器的特性，如嵌套规则、变量和混合等。 4. **组件样式隔离**：Vue.js通过组件化实现样式隔离，每个...
不同的CSS预处理器的穿透（less，sass，stylus）
m0_61840359的博客
11-14 282
这也是我在项目中遇到的问题当时的预处理器是stylus 我使用 /deep/ ::v-deep发现修改的样式并不能生效，最后发现stylus预处理器的样式穿透是 >>> 所以就对这几个预处理器的穿透做了总结。
2024前端面试（都是我一点一滴记录下来的）
weixin_39940684的博客
08-17 2327
前端面试
less使用的样式穿透
qq_34639706的博客
08-31 4586
#wrap /deep/ p { margin-top: 50px; }
vue中样式穿透的三种写法
weixin_55690518的博客
08-27 3951
1.>>>在less中使用 2./deep/在less中使用 3.::v-deep在scss中使用
less scss样式穿透
xujiawei4399的博客
12-29 631
color:red。
less使用样式穿透
weixin_43837268的博客
10-14 6668
#told /deep/ p { margin-top: 20px; margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
「VUE架构」Vue2.0 style样式scoped使用less时样式穿透覆盖
AIGC大前端小王子
08-29 3670
本文主要介绍Vue2.0 style样式scoped使用less时样式穿透覆盖。主要实现的方法是/deep/和>>> 一、使用/depp/ <style scoped lang="less"> .class{ /deep/.upwarp-nodata, /deep/.upwarp-tip { .px2rem(font-size, 12......
CSS样式穿透
weixin_44293690的博客
08-02 4248
CSS样式穿透
less和sass的穿透
09-01
sass和less的样式穿透是指在嵌套的选择器中，通过特定符号来访问父级选择器以及其他元素的样式。在sass中，可以使用`&`符号来引用父级选择器。在less中，可以使用`&`符号来引用父级选择器，并使用`:`来穿透其他元素的样式。 以下是sass和less中样式穿透的示例： 在sass中，假设有以下代码： ```scss .btn { color: blue; &-primary { background-color: red; } &-secondary { background-color: green; } .container & { font-weight: bold; } } ``` 编译后的CSS代码如下： ```css .btn { color: blue; } .btn-primary { background-color: red; } .btn-secondary { background-color: green; } .container .btn { font-weight: bold; } ``` 在less中，假设有以下代码： ```less .btn { color: blue; &-primary { background-color: red; } &-secondary { background-color: green; :hover { color: yellow; } } .container & { font-weight: bold; } } ``` 编译后的CSS代码如下： ```css .btn { color: blue; } .btn-primary { background-c
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值