有关less中calc计算不生效的问题

最新推荐文章于 2024-03-27 14:47:41 发布
最新推荐文章于 2024-03-27 14:47:41 发布
阅读量6.4k 收藏 1
点赞数 5
CC 4.0 BY-SA版权
分类专栏： less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38111015/article/details/81281595
本文介绍了一个在使用LESS预处理器时遇到的calc计算不生效的问题，并提供了一种有效的解决方案。通过在calc函数内使用转义字符串的方式，使得高度计算能够正确执行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近使用less预处理器，发现calc计算不生效的问题

这是我写的代码

这是控制台中的效果

可以看出 less中直接使用calc(96vh - 100px) 按照正常的减法运算了

解决方法：

height: calc(~"96vh - 100px"); 

这样就可以正常计算，控制台中编译效果如下

CSS预处理器sass和less
weixin_68658847的博客
02-21 2715
CSS预处理器sass和less
关于calc()在less中无效的问题
eele_one的博客
08-23 649
  一般的写法 height:calc(100% - 1.305rem); less中的写法 height: calc(~'100% - 1.305rem');
less下calc失效
wolzh88的博客
05-19 364
使用less时,calc计算会产生bug calc(100% - 1px) 修改为 ~"calc(100% - 1px)" 波浪号(~)、引号("") 必须加
Vue中css部分，calc()无效
weixin_41866717的博客
07-12 2305
参考：calc()无效，知道真相的我眼泪掉下来 calc(100%-60px) —— 错误 calc(100% - 60px) —— 正确 calc() 能计算的计算表达式里，“ + ” 和 “ - ” 两边要留空格，而 “ * ” 和 “ / ” 没有这个要求。 ...
calc在Less中不生效的解决方法
weixin_39118782的博客
09-10 1665
calc在css文件中的正常写法 height: calc(100% - 44px); // 运算符前后都要有空格 然而在Less文件中这样写不生效，编译后的结果为height: 56%; 查其原因，是跟 Less 的语法冲突了，Less 把calc的参数当作运算式执行了。解决方式是使用 Less 的转义字符~，文档：https://github.com/SomMeri/less4j/wiki/Less-Language-Escaping 所以在Less文件中的写法应为： height: calc(~"1
(less) calc运算为什么不生效? 变量如何使用?
tan_xiao_tan的博客
03-27 941
calc运算为什么不生效?
解决在css3中使用calc()无效的问题
爱码士的博客
04-13 4512
说明 在写前端的时候，需要根据页面高度自动调整高度，于是写了下面的代码。 .content { margin: 80px 20px 0; height: calc(~"100vh-133px"); background-color: white; } 运行后发现，无法编译。 解决 以上是less的写法，经过排查，需要在运算符号之间加空格即可。 .content...
vue知识点六- Less
weixin_43725034的博客
11-03 685
1.概览 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。 这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。 2.安装 npm insta...
Style笔记(css, stylus,less)
Ndbsa的博客
11-24 765
css，stylus，less各种语法记录
calc（）
最新发布
03-25
可能用户在使用calc()时遇到了问题，比如布局错乱或者计算未生效，所以需要强调正确的语法和单位处理。另外，动态计算的优势，比如适应不同屏幕尺寸，也是用户关心的应用场景。 最后，生成相关问题时，要考虑用户...
vue解决less中calc计算不生效的方法
总结前端开发中遇到的问题，分享前端知识
07-24 2394
最近使用less预处理器，发现calc计算不生效的问题 这是我写的代码 这是控制台中的效果 可以看出 less中直接使用calc(96vh - 100px) 按照正常的减法运算了 解决方法： height: calc(~"96vh - 100px"); height:e("calc(100%-60px)") 这样就可以正常计算，控制台中编译效果如下 ...
css中calc()计算函数在less编译出错解决方法
时光从指尖划过的博客
01-18 541
问题 在使用less编写以下样式时： height: calc(100% - 10px); 会被编译成： height: calc(90%); 我们想要的结果应该是减去 10px 而不是 10%！ 解决 这是因为less自带有 减 的方法，导致在编译时，会直接进行减法运算，而忽视了单位。 所以需要添加 ~ 符号进行转义，使其原样输出： height: ~"calc(100% - 10px)"; 或者 height: calc(~"100% - 10px"); 以上代码皆可解决！ ...
解决height calc()不生效 - 含代码
草巾冒小子的博客
01-31 1680
【代码】解决height calc()不生效 - 含代码。
vue中使用calc计算值不生效，less插件
xiaocainiaoaa的博客
03-29 1060
注意点：1.中间的运算符号两头都要有空格；2.加上～符号，具体写法：height: calc(~“100vh - 46px”);
css中calc不生效（不起作用）
热门推荐
yanhappiness
11-11 1万+
calc属性作用不起作用是因为书写格式错误，正确的格式需要在运算符的两边留有空格。2、父元素需要设置高度或者宽度，不能用100%。如果还解决不了，请留言。css中calc属性不起作用。
calc方法和vue中calc不生效踩坑
m0_54741495的博客
10-10 1709
在vue文件中,如果style标签中设置了less,那么直接写calc就不会生效,必须用下面的语法才行。calc()方法是css用来计算的,比如一个场景,上下固定高度,中间自适应,就可以使用这个方法。预编译less也是可以使用这个方法的。
vue 解决less中calc无法正确计算的方法
qq_34507902的博客
08-14 885
在表达式前加上“~”字符即可正确解析 实例：style标签 scoped要去掉负责认为是css文件 加~无效 div{ height: calc(~"100%-100px") }
css calc()的使用，以及失效原因
程邓楠的博客
07-29 3196
一、定义与用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； div { width: calc(100% - 450rpx); height: calc(100% - 400rpx); margin: 0 auto; paddin
css3的calc属性不生效问题
weixin_30640769的博客
07-03 3741
css3的 calc：计算属性。由于自己做的项目中这个属性不常用到，偶尔用一次还没效果。 后来研究了下是因为运算符两边没加空格。 错误示例：.content{width:calc(100%-50px)}这样是不生效的 运算符"+ - * /"左右两边均要留空格 正确示例：.content{width:calc(100% - 50px)} 转载于:htt...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值