less中calc 使用

最新推荐文章于 2023-09-05 11:00:37 发布
最新推荐文章于 2023-09-05 11:00:37 发布
阅读量6.6k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： less 文章标签： less calc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40551876/article/details/82992003
本文揭示了在Less预处理器中使用calc函数时遇到的单位解析问题，并提供了解决方案。通过正确引用单位和使用特定语法，可以避免计算错误，确保样式按预期工作。

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

发现在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。

 

解决方案

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

结合less使用特点

    @postHeight: 46px;

    @postBorderHeight: 1px;

    @postMarginHeight: 10px;

     margin-bottom: calc(~"@{postHeight}" )

     margin-bottom: calc(~"@{postHeight} + @{postBorderHeight} * 3 + @{postMarginHeight} * 2" )

 

提示：注意运算符（+ -  *  / ）的前后一定要有空格，便于解析！！！

 

 

前端领域 Less 的函数使用详解
AI架构全栈开发实战笔记
04-12 782
Less函数的基本语法和定义方式函数参数的各种传递形式函数与Mixin的区别与联系实际项目中的函数应用场景性能优化和最佳实践首先介绍Less函数的基本概念然后详细解析函数语法和参数传递接着通过实际案例展示应用方式最后探讨工程化实践和性能优化Less：一种CSS预处理器，扩展了CSS语言，增加了变量、Mixin、函数等功能。函数(Function)：Less中可接受参数并返回值的代码块，用于计算和生成样式值。Mixin。
浅谈css3中calc在less编译时被计算的解决办法
09-24
主要介绍了浅谈css3中calc在less编译时被计算的解决办法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
less使用calc
mp_sunny
11-15 1855
1、在less语言中，使用calc计算容器的宽度，需要加一个符号“～”     1> 由于less中会把它当表达式计算掉了，需要在参数外面加上: ~("expression")     .div{          width: calc(~"100% - 60px");        }     2>  或者使用e(“”)包裹在里面      width:e("calc(...
less中如何使用calc
最新发布
2301_77456141的博客
09-05 1371
普通写css时使用calc直接height：calc（100vh-60px)即可，但是我们发现在less编译模式中不管用了，是因为在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。
less中使用calc
qq_46956509的博客
02-24 492
width: calc(~'100% - 170px'); 注意：-前后的空格不能少
less中使用calc问题
undefined
07-05 1719
记录一个问题：在less中使用calc出现了非预期的编译结果。 例如： 在上例中，预期的结果是全屏高度减去5像素。但是less之后的结果为95vh。明显是有问题的，在less.js的github上面也找到了类似的问题。less对于calc中的单位处理存在问题。可以理解为将上例中的 处理成了 。这个问题在低版本的less中一直存在，可以通过字符转移进行处理： 注意新添加的 和 双引号！除了使用上面比较tricky的方法外，还可以通过升版本来解决。在版本中作者对此问题进行了修复。如果版本可以兼容的话，可以提高版
Node.js 工具：CLI 上实现 Less 计算的 node-less-calc
- 变量：可以存储信息并在整个文档中使用，如颜色、字体大小等。 - 混入（Mixins）：可以将一组属性从一个规则集引入到另一个规则集。 - 嵌套规则：允许将一套规则嵌套在另一套规则中。 - 运算：支持加、减、乘...
CSS使用calc()获取当前可视屏幕高度的实现
11-19
`calc()`函数允许在CSS中执行基本的算术运算，包括加法（+），减法（-），乘法（*）和除法（/）。例如，`width: calc(100% - 10px);`表示元素的宽度将占据其父元素的100%，但减去10像素。 当我们想要一个元素的高度...
css less中使用calc（）写法
上好佳的博客
01-09 741
css less中使用calc（）写法
如何在Less中使用使用calc
baidu_39305094的博客
06-21 761
div { 　　width : calc(~"100% - 30px"); }
less转css的calc问题
故乡的良宵风花的博客
09-05 975
问题：在less中使用calc，转为css时calc(50% - 40px)被转为calc(10%)，解析时忽略了单位直接计算再加百分号； 原因：less的计算方式和calc方法有重叠，两者在一起有冲突； 解决：width: e("calc(50% - 40px)")或width: calc(~"100% - 40px");
less中 使用css3的calc
oneyJiang
06-27 437
less中对于calc的解析会有冲突，less中写法： .div{ width: calc(100% - 50px) } less编译后： .div{ width: 50%; }解决办法.div{ width: calc(~"100% - 50px"); }编译为.div{ width: calc(100% - 50px);} //如果进行数值和变量之间的运算可以这...
less calc无法使用
qq_16591861的博客
12-09 439
calc(~"100% - 30px")；  calc(~"100% - @{diff}");//变量写法
less中使用calc函数的注意事项
zhy810302的专栏
06-28 546
最近在阅读别人的VUE组件源码时，发现了其使用了less计算函数calc，里面用到了“~”符号，百思不得其解，在官网上也没有特别说明的地方，于是通过某搜索引擎，终于找到了答案： 在less中，calc(100% -4rem) 等带单位的混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。 解决方案 max-height: calc(~"100vh -69px"); 结合less使用特点 @postHeight: 46px...
less计算宽高正确写法
weixin_41848005的博客
08-11 3875
在less中正确使用calc
CSS3 - Less中calc计算属性
idomyway的博客
06-18 3847
前言     在写普通的CSS样式时，计算属性的写法如下： .box { widhth: 100%; height: calc(100% - 50px); } Less中的写法 .box { width: 100%; height: calc(~"100% - 30px"); // 效果相同 height: ~"calc(100% - 60px...
less-calc()
qq_42855675的博客
04-06 534
calc() 只作用于属性值 不能在媒体查询中使用 /* 无效 */ @media (min-width: calc(40rem + 1px)) { /* Wider than 40rem */ } 与预处理器数学比较 .foot { width: calc(10px + 50px); } //组合不同单元; .foot元素总是小于它父元素宽度 50px; //使用 calc()，计算值是表达式它自己，而非表达式的结果 .foot { width: calc(100% - 50px); }
less编译calc解决办法
xuxinxiang的博客
03-07 503
height: calc(~'100% - 86px');
Less中使用calc()的坑
zhangrui_web的博客
05-16 2516
前端开发者们对于calc()已经不陌生了，它是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来计算元素的长度。 使用示例如下： div { height: calc(100vh - 88px); } 需要注意的只有一点： 中间的运算符两头都要有空格！！！ 同样的代码写在less中，就出现问题了。最终结果可能变成了： div { height: ca...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值