CSS 字符串变量的正确null值是多少

发布于12月02日

使用css变量，我知道您可以设置它们:

--transform: translateX(30px);
transform: var(--transform, translateY(100%));
//         ^ usage          ^ fallback value if none specified

使用转换，可以链接方法，也可以使用复杂变量:

--transform: translateX(30px) rotate(-12deg);
transform: var(--transform) translateX(10px) rotate(15deg) scale(1.5);

有没有一种方法可以忽略--transform(但仍然遵循它之前和之后的所有其他说明)？我试过了:

--transform: none
--transform: ""

但显然，它们使宣言无效.

body{
  display: flex;
  gap: 100px;
}

.block{
  --turn-amount: rotate(45deg) rotate(13deg);
  --scale-amount: 3;
  aspect-ratio: 1/1;
  width: 100px;
  background: blue;
  transform: var(--turn-amount) scale(var(--scale-amount));
}
.block-1{
  --turn-amount: 0
}

<div class="block block-1">Grow and turn</div>
<div class="block block-2">Just grow</div>

我想写一些类似的东西:

.block-1{
  --turn-amount: null;
}

但目前，我想出的最好办法就是宣布一个"无意义"的转换，即

.block-1{
  --turn-amount: scale(1);
}

body{ display: flex; gap: 100px; } .block{ --turn-amount: rotate(45deg) rotate(13deg); --scale-amount: 3; aspect-ratio: 1/1; width: 100px; background: blue; transform: var(--turn-amount) scale(var(--scale-amount)); } .block-1{ --turn-amount: ; }

body{ display: flex; gap: 100px; } .block{ --scale-amount: 3; aspect-ratio: 1/1; width: 100px; background: blue; transform: var(--turn-amount,) scale(var(--scale-amount)); } .block-2{ --turn-amount: rotate(45deg) rotate(13deg); }

CSS 字符串变量的正确null值是多少

推荐答案

Css相关问答推荐

在Powershell中使用正则表达式编辑css文件

Primeng Angular更改p-dialog背景 colored颜色

此css Select 器的总体特性是什么？按钮：不是(#mainBtn，.cta)

设置ScaleImageButton的样式

响应的Megamenu位置css

关闭Superset中的Deck.gl工具提示

如何在css中创建文件div效果

Firefox中的解决方法：has(不使用JavaScript)

Vue.js 变量中的动态类变量

宽度为 x VW 的元素似乎对窗口调整大小没有react

Adobe Illustrator 删除我在 svg 图像上的类名.我怎样才能防止这种情况？

CSS，居中的 div，缩小以适应？

flexbox 布局中的 Padding-bottom/top

CSS3 变换：旋转；在 IE9 中

绝对位置和溢出：隐藏

Div Size 自动调整内容大小

如何在没有填充区域的情况下背景化 div

CSS Select /样式第一个词

@font-face src： local - 如果用户已经拥有本地字体，如何使用它？

如何重置或覆盖 IE CSS 过滤器？