vue解决less中calc计算不生效的方法

原创 已于 2022-04-22 09:20:37 修改 · 2.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

于 2019-07-24 10:21:47 首次发布
本文介绍了一个关于LESS预处理器中calc计算不生效的问题及其解决办法。通过调整CSS语法，使用特定格式的字符串来确保高度计算能够正确执行。

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

解决方法：

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

height:e("calc(100%-60px)")

这样就可以正常计算

 

 

【vue+leaflet】自定义控件(五)
$
10-27 2274
imgBox {// 控件样式&:hover {// 取消按钮top: 0px;left: 31px;z-index: 2;// 鼠标指针important;// 门.name {left: 7px;top: 7px;
h5 rem vue_基于Vue的移动端h5项目总结
weixin_35909238的博客
12-31 473
以前都是写pc，后来需要写h5移动端项目，会遇到一些自适应和兼容性等方面的问题，下面从自己写过的h5项目中稍稍做点总结。一.自适应布局1.1 vw与rem相结合实现适配1.原理开启一个移动端项目的基础，首先是想好如何在代码中实现移动端适配。之前没有经验，第一个项目里简单粗暴地采用px写死的方法，觉得不好，本项目采用的是像一位优秀同事习得的rem布局方法，它可以自适应不同屏幕尺寸的设备，简单好用。这...
calc方法和vue中calc不生效踩坑
m0_54741495的博客
10-10 1823
在vue文件中,如果style标签中设置了less,那么直接写calc就不会生效,必须用下面的语法才行。calc()方法是css用来计算的,比如一个场景,上下固定高度,中间自适应,就可以使用这个方法。预编译less也是可以使用这个方法的。
vue calc函数计算出来的值有问题，不生效（less插件）
PrimaryColor
05-13 2438
calc函数计算出来的值有问题，不生效。多半是是跟less插件起冲突了，需要将calc写法转成字符串类型，如：calc(~“100% - 40px”)。 css的calc()函数相关知识： 运算符前后必须空格隔开，否则不生效；常用的长度值几乎都可以使用calc()函数进行计算（包括%，px等），calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数在less中不能使用不生效（less的运算方式和calc发送了冲突），比如calc(100% - 250px )会被编译为ca
Vue中css部分，calc()无效
weixin_41866717的博客
07-12 2332
参考：calc()无效，知道真相的我眼泪掉下来 calc(100%-60px) —— 错误 calc(100% - 60px) —— 正确 calc() 能计算的计算表达式里，“ + ” 和 “ - ” 两边要留空格，而 “ * ” 和 “ / ” 没有这个要求。 ...
vue中使用calc计算值不生效，less插件
xiaocainiaoaa的博客
03-29 1102
注意点：1.中间的运算符号两头都要有空格；2.加上～符号，具体写法：height: calc(~“100vh - 46px”);
calc在Less中不生效的解决方法
weixin_39118782的博客
09-10 1720
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
vue知识点六- Less
weixin_43725034的博客
11-03 704
1.概览 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。 这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。 2.安装 npm insta...
Vue进阶（幺柒零）：前端用户体验提升（四）应用 rem em 实现字体自适应_vue em
2401_85124329的博客
06-11 627
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！计的布局。不过偶尔你会遇到真的需要使用显式的固定值，以防止缩放的元素。采用固定尺寸值的前提应该是，如果被缩放的话，它的结构会被打破。这真的不常出现，所以你想应用px单位之前，问问自己是否使用它们是绝对必要的。正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
关于在less中使用calc失效的问题
百岁如流富贵冷灰的博客
08-14 1752
最近自己也是换了一份工作，开始从事vue的开发，之后也会记录一些自己vue方面遇到的一些问题 进入正题： 最近在开发当中遇到了一个问题：当我在less下按照常规的方法使用calc属性的时候，发现calc计算有很大的误差： 这是我书写的样式： 最终渲染出来的样式： 原因： 从数值上看，px也被解析成%进行了运算，这个的原因是calc属性在less下解析时会忽略运算的单位，统一使用第一个数值的单位（注意：很多文章上写的是按照百分比处理，这个说法是不正确的，例如将100%换为100em，最终的结果是2
解决vue中使用less/sass及使用中遇到无效的问题
01-18
一：使用方法 在vue官方脚手架中，即vue-lci搭建的项目中，可以轻易的使用less/sass。 先使用npm下载依赖，命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象： { test: /\.less$/, loader: style-loader!css-loader!less-loader }` 然后在style标签中添加lang=”less”即可，或者直接引用less文件，或者import一个less文件（如同import一个css文件）。 <style
vue中calc不生效，calc 取负数
qq_40599116的博客
12-13 2318
添加一个~即可，下面两种方法都可以 width: calc(~"100% - 2.8rem"); width: ~"calc(100% - 2.8rem)";
vue 解决less中calc无法正确计算的方法
qq_34507902的博客
08-14 895
在表达式前加上“~”字符即可正确解析 实例：style标签 scoped要去掉负责认为是css文件 加~无效 div{ height: calc(~"100%-100px") }
(less) calc运算为什么不生效? 变量如何使用?
tan_xiao_tan的博客
03-27 1009
calc运算为什么不生效?
Vue less 没成功
clhdtzhh的博客
12-06 491
npm install less-loader --save-dev之后换 npm i less 成功
calc属性不生效
flydrem
08-31 1222
calc属性不生效一、calc属性不生效 一、calc属性不生效 不生效代码 calc(50%-2rem); 在使用calc的时候，没有生效，浏览器控制台提示“invalid property value” 解决办法 是在运算的两侧加上空格即可 生效代码 calc(50% - 2rem) ...
关于calc()在less中无效的问题
eele_one的博客
08-23 662
  一般的写法 height:calc(100% - 1.305rem); less中的写法 height: calc(~'100% - 1.305rem');
有关less中calc计算不生效的问题
李小乐er
07-30 6504
最近使用less预处理器，发现calc计算不生效的问题 这是我写的代码 这是控制台中的效果 可以看出 less中直接使用calc(96vh - 100px) 按照正常的减法运算了 解决方法： height: calc(~"96vh - 100px");  这样就可以正常计算，控制台中编译效果如下 ...
vue项目使用less/sass无效问题
weixin_45115895的博客
04-21 3041
vue使用less/sass无效问题 vue项目安装了less依赖,在页面style标签里引入" lang=‘less’ “,但是每次加上scoped样式就会失效,或者是可以加scoped,但是再引入” lang=‘less’ ",样式也会失效,给我纳闷了好久 前两天找到原因了,原来依赖安装完成后还要再util ...
使用antd of vue
最新发布
06-24
如何解决ant-design-vue在Vue2中按需引入样式不生效的问题？2.在Vue2中使用ant-design-vue时，如何自定义主题色？3.ant-design-vue在Vue2中如何实现表单验证？4.如何全局配置ant-design-vue组件的默认属性？5.在Vue2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值