sass/scss calc表达式中使用变量不生效解决

已于 2023-05-31 11:36:09 修改
阅读量543 收藏 1
点赞数
文章标签： sass scss 前端
于 2023-05-17 14:30:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42634398/article/details/130725061
版权

在css计算属性中使用自定义的变量进行计算，不生效。–红色剪头标注的方式
官网查看后 发现要使用插值语句包裹变量才能使用 --蓝色剪头标注的方式

在这里插入图片描述

  • 一般我们定义的变量都为属性值，可直接使用
  • 如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用

以下为官网示例 ps：找了超级久这个问题
在这里插入图片描述

暴躁小徐~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
[Sass/Scss] 04. 使用Bootstrap的Sass/Scss版本进行编译
08-31
[Bootstrap_3][Sass_Scss][中文]_04._使用Bootstrap的Sass_Scss版本進行編譯
vue cli3 配置sass全局变量设置不生效，sass混合器文件全局引入
我说我是学霸你信吗的博客
05-08 3213
vue cli3 配置sass全局变量的问题首先确保依赖安装完整找到vue.config.js加入配置信息 首先确保依赖安装完整 1.node-sass 2.sass-loader 3.style-loader 如果没有安装，运行一下命令安装 npm install node-sass sass-loader style-loader --save 找到vue.config.js加入配置信息 m...
解决scss使用变量,属性值无效
m0_58575070的博客
08-22 1142
页面中使用 发现属性值无效 解决; 使用' #{} ' 插值语法使用变量 , 就可以完美解决了。
解决scss中无法使用自定义的全局$变量
最新发布
m0_69247348的博客
05-21 243
解决引入并使用scss过程中出现的错误
css定义变量(定义:--aa；使用:var(--aa)、calc()计算样式函数
热门推荐
muzidigbig的博客
05-07 1万+
一、兼容性 2017年3月，微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。 二、用法 声明css变量的时候，变量名前面要加两根连词线（--）。 变量名大小写敏感，--header-color和--Header-Color是两个不同变量。 var()函数用于读取变量。var()函数还可以使用第二个参数，表示变量的...
Vue scss 引入变量报错
qq_30436011的博客
09-26 1668
官网css引入配置 参考文章 sass/scss篇 sass/scss文件与vue组件样式代码 /* variable.scss */ $color: orange; // vue组件内的style标签，将要使用上述变量的地方 <style lang="scss"> .scss div { color: $color; } </style> sass 全局变量引入方法一 使用css.loaderOptions 此处友情提示 sass-loader v7 之前使
css属性设置calc后(动态计算)，不生效的问题
engineer_why的博客
06-12 2158
的左右两边需要空格，，没有空格不生效。为了统一，/ 和 * 最好都带上空格。父元素需设置宽高，若没有可设置100%在书写calc语法时，运算符(
scss导出颜色变量为空对象
幽灵古堡的博客
04-27 926
scss导出颜色变量
[Sass / Scss] 01. Sass / Scss 简易介绍
08-31
[Bootstrap_3][Sass___Scss][中文]_01._Sass___Scss_簡易介紹
[Sass/Scss] 02. 使用桌面程序Scout编译Sass
08-31
[Bootstrap_3][Sass_Scss][中文]_02._使用桌面程式Scout編譯Sass
Sass/SCSS：让CSS书写更高效
01-08
目录一、Sass/SCSS使用简介1. Sass和SCSS的关系2. Sass简介3. 在项目中编译Sass4. Sass/SCSS、Less还是stylus？二、Sass（基于SCSS语法）详解1. CSS功能拓展(1). 嵌套规则(2). 父选择器&(3). 属性嵌套(4). 占位选择...
[Sass/Scss] 03. 制作Class组件
08-31
[Bootstrap_3][Sass_Scss][中文]_03._製作Class元件
react引入公共scss
qq_35438952的博客
07-30 328
第一步 cnpm i sass-resources-loader --save-dev 第二步找到 webpack.config.js 路径在：node_modules\react-scripts\config\webpack.config.js 第三步 原始样子 { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders(
sass 在vue2.0使用报错
qq_43427657的博客
02-05 202
1, npm i node-sass --save-dev2, npm install sass-loader@7.3.1 --save-dev不要使用一条命令npm i --save-dev node-sass sass-loader因为最新安装的sass-loader是8.0,会报错! 报错： 13% building modules 30/78 modules 48 active ...strator\Desktop\l\app-men\src\App.vue{ parser: "babylo
vue 全局使用scss的坑
猿的计划的博客
01-02 906
npm install sass-loader@7.3.1 --save-dev（安装高版本的会报错 这个耗费了我一个小时） npm install node-sass --sava-dev npm install sass-resources-loader --save-dev删掉 因为新版本的vue-cli已经帮我们把sass-loader配置好了，不然你要是在main.js引入scss会报错...
前端-css学习笔记
m0_53155317的博客
01-30 1250
CSS CSS，它代表(Cascading Style Sheets)层叠样式表。 使用< style >标签为元素定义CSS样式 style可以定义在开头，也可以定义在标签内 在代码的顶端，创建一个如下所示的style元素： <style> </style> 所有的h2元素都设置为红色 <style type="text/css"> h2 { color: red; } </style> 普通文本内容 <h2>h
css 不生效，这是什么情况？
weixin_42603332的博客
12-21 2615
有几种可能的原因导致 CSS 不生效： CSS 文件没有正确加载。检查你的 HTML 代码是否正确引用了 CSS 文件，并确保 CSS 文件的路径是正确的。 CSS 规则没有应用到相应的元素上。检查你的 CSS 代码是否正确地选择了相应的元素，并确保你的 CSS 规则的优先级足够高。 浏览器不支持你使用的 CSS 特性。确保你使用的 CSS 特性在目标浏览器中是受支持的。 CSS 被其他样...
sass变量导出，以Js的形式使用SCSS变量，遇到的问题
qq_31496915的博客
04-20 1760
在javascript导入sass 的module，本想在vue组件的业务逻辑里面进行动态控制样式，每次sass变量variables.menuBg都为空，也不报错，很懵圈。百撕不得骑姐。 一开始以为是sass-loader更新的问题就去webpack文档看最近的更新，然后我百度，看到有人问，但是没人回答。卡了一段时间，百撕不得骑姐之际，我就去看vue的脚手架的更新。后面才发现是vue脚手架更新的问题。 vue-cli关于cssmo...
Sass/SCSS (with dart-sass)
06-09
Sass/SCSS是一种CSS预处理器，它可以让开发者在编写CSS的过程中使用变量、嵌套、函数等语法来简化CSS代码的编写。Dart Sass是Sass的一种实现，它是一个纯JavaScript实现的Sass编译器，可以将Sass/SCSS代码转换成纯CSS代码。与其他Sass编译器相比，Dart Sass具有更快的编译速度和更好的错误报告。此外，Dart Sass还支持许多高级功能，如@use指令、模块化等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值