当前位置: 首页 > 面试题库 >

如何在calc()表达式中获得CSS变量的负值?

方宁
2023-03-14
问题内容

让我开始向您展示如何在SCSS中执行此操作:

$submenu-padding-left: 1.5em;

transform: translateX(calc(-#{$submenu-padding-left} + .5em));

可以编译为:

transform: translateX(calc(-1.5em - .5em))

基本上,SCSS允许我将减号-与变量连接起来,以便将其转换为负值。

是否可以使用CSS变量来实现?


问题答案:

是的,你可以做到。只需乘以-1

:root {

  --margin: 50px;

}



body {

  margin: 0 100px;

  border:1px solid;

}



.box-1 {

  background: red;

  height: 100px;

  width: 200px;

  margin-left: calc(-1 * var(--margin));

}



.box-2 {

  background: green;

  height: 100px;

  width: 200px;

  margin-left: calc(-1 * (-1 * var(--margin))); /* You can also nest calculation */

}


<div class="box-1">

</div>

<div class="box-2">

</div>


 类似资料:
  • 我设置了一个mixin来进行跨浏览器计算, 我还有一个变量。 我希望能够在其中使用一个变量。 但我不确定这是不是最好的办法。

  • 问题内容: 我正在尝试在Sass样式表中使用该函数,但遇到了一些问题。这是我的代码: 如果我使用文字而不是变量,那么我得到的正是我想要的。但是,当我切换到变量时,这是输出: 如何让Sass认识到它需要替换函数中的变量? 问题答案: 插值: 对于这种情况,border-box也足够了:

  • 问题内容: 在angular中,您可以编写过滤器表达式,例如 并会更新表格以仅显示与您在中输入的文字匹配的电话。 如何在变量(例如范围变量)中获取过滤器的相应结果数组,例如当前显示的? 问题答案: 您实际上可以在角度表达式中将新变量分配给作用域。因此,最简单的解决方案就是这样做。现在,filteredPhones是当前作用域中的变量- 请参阅此plnkr示例。

  • 本文向大家介绍如何在Java中声明lambda表达式中的变量,包括了如何在Java中声明lambda表达式中的变量的使用技巧和注意事项,需要的朋友参考一下 lambda表达式 是一个函数,期望并接受输入参数,并产生输出结果。它是功能接口 的实例,也称为单个抽象方法接口(SAM 接口),如Runnable,Comparator,Callable 等。我们可以将变量声明为final string []

  • 本文向大家介绍如何在变量中的JSP中使用XPath表达式的值?,包括了如何在变量中的JSP中使用XPath表达式的值?的使用技巧和注意事项,需要的朋友参考一下 <X:集>标签集以XPath表达式的值的变量。 如果XPath表达式的结果为布尔值,则<x:set>标记将设置一个java.lang.Boolean对象;否则,该值为false。对于字符串,java.lang.String; 以及一个数字,

  • 问题内容: 我想在内部使用,该怎么办Python? 问题答案: 从python 3.6开始,你还可以使用文字字符串插值。在你的特定情况下,解决方案是: