SCSS中使用calc计算值时不能包含变量的解决方法
今天写SCSS的时候,发现在SCSS中使用calc
,如果calc
中包含一个变量,则无法识别该,如下图所示:
通过查看一番,原来要想在SCSS的calc
中使用变量,必须对这个变量使用SCSS的插值方法#{$variable}
。
//如下示例: max-height: calc(100vh - #{$contactBarHeight} - 64rpx);
相关内容
-
深入浅析CSS中的数学表达式calc()
【推荐教程:CSS视频教程】数学表达式calc()是CSS中的函数,主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。定义数学表达式calc()是calcu...
-
css中能加减乘除吗
css中能加减乘除。在css中可以使用calc()函数来进行“加减乘除”四则运算,它允许使用“+”、“-”、“*”、“/”这四种运算符,可以混合使用%、px、em、rem等单位...
-
css如何实现自适应
在css中,可以使用calc()函数来实现自适应,只需要在元素中添加“元素:calc(100%-像素大小);”即可。calc()函数是css3新增的一个功能,通过计算来指定元素...
-
浅析Scss基础语法和导入SASS文件的方法
本篇文章主要介绍最基础的使用和语法,可以看到,Scss引入的变量和嵌套,极大地方便了开发工作,结合其自带的插值表达式,使得css样式编写非常灵活!Sass语法介绍sass有两种...
-
SCSS入门教程及用法指南
Sass是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。特性概览CSS书写代码规模较大的...
-
LESS 和 SCSS 有什么区别?
LESS和SCSS都属于CSS预处理器的范畴,也就是CSS的超集,但是两者的语法、如何使用和具体的功能实现还是有差异的。下面我试着以代码示例的方式给大家演示一下两者的几个常见区...
-
有关LESS中calc计算不生效的问题
在使用LESS写样式的时间发现了一个问题:LESS中直接使用css3计算属性calc时,如:calc(50%-100px)方法,出现的计算结果并不是我们想的。经过一番查找,找到...
-
css中margin的4个属性顺序
在CSS中,margin 属性的四个值可以按照以下两种方式来指定:按照顺时针方向依次指定上、右、下、左四个方向的外边距值。例如:margin:10px20px15px5px;/...
-
css中padding四个值的顺序
当你使用padding属性来设置元素的内边距时,可以按照以下两种方式来指定四个值:按照顺时针方向依次指定上、右、下、左四个方向的内边距值。例如:padding:10px20px...
-
微信手机弹幕/手持弹幕怎么弄
有很多朋友问:手机弹幕怎么弄?在这里给大家分享一下,手机弹幕一般是小程序制作的,不用麻烦的再去下载APP。在这里给大家说一下,手机弹幕和手持弹幕其实是说的一个东西,只是叫法不同...