定义scss颜色变量deep()

于 2024-09-21 23:38:50 发布
阅读量233 收藏
点赞数 3
文章标签： scss 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62159673/article/details/142426614
版权

在小程序中必须要用deep()定义才有效

详细步骤：首先实现创建scss文件，定义颜色

在uni.scss文件引入

就可以这样直接使用了

特殊情况

像这种样式是行内样式

通过调试定位到里面有一个这样的class

这种一般正常情况用在scss里面按照上面的写法就行，但是这样写就只能在h5上是正常的，在小程序上样式没有效果，这时候加上deep()再写样式就可以了

m0_62159673
关注
vue-scss-variable-scan:让vscode在vue文件中提示scss自定义变量
04-29
vue-scss变量扫描这是一个扩展，允许vscode在Vue和Scss文件中提示SCSS的自定义变量。扩展设置有以下四个设置： vue-scss-variable-scan.globalPath ：SCSS扫描变量的路径（默认值：src / ** / *。scss） vue-scss-...
css: deep深度作用选择器
weixin_39357177的博客
03-05 3万+
前言 当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素，不会影响到子组件（非根结点）的样式。 使用scoped后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。 原理 在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】...
scss中使用/deep/深度选择器报错的解决办法
weixin_44900104的博客
08-04 2万+
scss中使用/deep/深度选择器报错的解决办法
uniapp定义scss颜色变量deep()修改子组件样式
最新发布
2301_76917834的博客
08-25 485
在base-style.scss中。在index.vue中使用。
scss中深度选择器如何使用
2401_83036723的博客
02-29 3877
以上两种方式正常情况下使用都没有问题，但在scss，less，sass等解析器中，>>>，/deep/可能都无法使用，这种情况可以采用 ::v-deep。在开发过程中，可能会遇到scss中样式不会执行，这时候我们就会用到深度选择器 /deep/在/deep/ 使用以上写法编译时，出现报错或者警告可以使用 ::v-deep。通常情况下，写样式穿透都是用 >>> ，或者 /deep/
scss解析/deep/以及＞＞＞深度选择器报错
only_neo的博客
07-30 4186
若存在::v-deep未生效的情况，确认使用的文件是否为组件级，若为组件级，改为在调用该组件的页面设置::v-deep即可。但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.如果vue的style使用的是css，那么则。此时我们可以使用第三种方式。
Vue3 关于scss预编译中:deep 其中的deep如何理解
专注基础架构领域
07-12 1321
在SCSS预处理器中，:deep是一个伪类器，用于一个元素的所有后代元素，无论它们在DOM结构中的层级深度如何。换句话说，:deep器是一个类似于CSS中的后代器，但是它可以不考虑嵌套层级的限制，而是选择所有符合条件的后代元素。例如，使用以下可以选择所有.container元素下的所有span需要注意的是，:deep选择器已经被标记为弃用的选择器，建议使用/deep/或者::v-deep代替。相关问题。
css预处理文件使用scss嵌套写法深度选择器deep失效问题
m0_48521482的博客
03-29 2096
vue3 + vite + elementPlus项目，css预处理文件使用scss嵌套写法导致深度选择器deep失效
项目主题切换scss变量
01-11
例如，你可以定义一个 `$primary-color` 变量来保存主色调，然后在其他地方引用这个变量，使得全局的颜色风格可以统一调整。当你需要切换主题时，只需改变这些变量的值，而不必修改每个用到该颜色的CSS规则，大大...
vue 之使用 scss 的全局变量
04-07
vue 之使用 scss 的全局变量
Vue + Scss 动态切换主题颜色实现换肤的示例代码
10-15
- **定义主题变量**：在_themes.scss文件中定义不同主题的颜色变量集合。 - **创建操作这些变量的mixin**：如@import "_themes.scss"; @include themeify;等，通过mixin动态应用主题变量。 - **创建函数获取颜色值**...
详解nuxt sass全局变量(公共scss解决方案)
11-30
以上这种通用的变量抽出来，方便你在其他scss的样式里面调用 比如 li { background: nth($colour,6) } 只存储变量，别放公共的样式进去切记公共的样式 你可以参考我之前的博客那种写法  我直接上案例吧sass_jb...
CSS——scss中使用/deep/深度[选择器](https://so.csdn.net/so/search?q=选择器&spm=1001.2101.3001.7020)报错
qq_43201350的博客
07-12 705
scss deep深度选择器
SCSS中使用/deep/报错 ::v-deep 替换 /deep/
m0_57454052的博客
03-31 4130
预处理器（例如Sass）可能无法>>>正确解析。 在这些情况下，可以用/deep/ 如果/deep/报错，可以使用::v-deep 组合器-两者都是它们的别名，>>> 并且工作原理完全相同。 用法和/deep/ 完全一样 用 ::v-deep 替换 /deep/ ，就成功解决了问题。 ...
【Scss】＞＞＞ 或 /deep/ 或 ::v-deep 的作用
qq_45677671的博客
07-28 4655
>>> 或 /deep/ 或 ::v-deep 的使用方法，以及相关报错处理
css深度选择器deep
qq_38806666的博客
12-18 1万+
css深度选择器deep
scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题
kirinlau的专栏
10-30 2724
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。使用中发现了一个问题，就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时，会影响到子组件中的样式，样式穿透的方式有：>>>、 /deep/、::v-deep这三种。使用>>>修改无效，原因是scss等预处理器却无法解析>>>第三种，使用::v-deep，
vue项目中，scss 使用 /deep/ 穿透写法
热门推荐
qq_36437172的博客
08-20 5万+
当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它通过使用 PostCSS 来实现以下转换： <template> <div class="example" data-v-f3f3eg9>hi</div> </template> <style> .example[data-v-f3f3eg9] { color: red; } </...
scss 使用 /deep/报错
mutouren_abc的博客
04-28 1079
scss 深度选择器，::v-deep
vue3 中 scss 使用 :deep 不支持嵌套，::v-deep 又即将弃用，怎么办？
04-01
在 Vue3 中，可以使用 `::v-deep` 或 `>>>` 来实现深度选择器，但是官方已经宣布 `::v-deep` 即将被弃用，而 `>>>` 在某些情况下会出现问题。 解决方法： 1.使用 `:global`，可以将样式应用于整个组件或应用程序。例如，要应用于整个组件： ``` <style scoped> :global(.my-class) { color: red; } </style> ``` 2.使用 CSS 变量，可以在组件中定义变量，并在样式中使用它们。例如： ``` <style scoped> :root { --my-color: red; } .my-class { color: var(--my-color); } </style> ``` 3.使用 `::v-deep` 的替代方案 `::slotted`，它能在父组件样式中选择子组件的内容。例如： ``` /* 子组件 */ <template> <div class="my-class"> <slot></slot> </div> </template> /* 父组件 */ <template> <div> <slot> <p class="my-class">This paragraph will be styled</p> </slot> </div> </template> <style scoped> ::slotted(.my-class) { color: red; } </style> ``` 以上是一些可行的解决方法，可以根据实际情况选择适合自己的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值