使用CSS变量的逻辑操作

本文演示了如何使用calc()函数中的算术在CSS开关变量上执行逻辑操作（值0或1）。我们在CSS中缺乏专用的逻辑功能，但是这些计算提供了有效的仿真。

使用calc()在CSS中的逻辑操作

不操作

否定开关变量（ --j ）很简单：从1中减去它。

 -notj：calc（1-var（-j））;

如果--j是0， --notj变为1;如果--j是1， --notj是0。

和操作

仅当两个操作数都是True时，该操作才返回true。对于开关变量（ --k和--i ），乘法实现了这一点：

 - 和：calc（var（-k） * var（-i））;

仅当--k和--i都是1时，这才能产生1；否则，是0。

NAND操作（不是）

NAND是否定和：

 -  -NAND：calc（1- var（-k） * var（-i））;

或操作

如果至少一个操作数为真，则操作是正确的。使用de Morgan的定律（ not (A or B) = (not A) and (not B) ），我们得到：

 -  or：calc（1-（1- var（-k）） *（1- var（-i）））;

也不操作（不是或）

OR的否定也不是：

 -nor：calc（（1-var（-k）） *（1- var（-i）））;

XOR操作（独家或）

XOR是正确的，如果完全一个操作数为真。减去变量和平方结果给出了绝对值，提供所需的0或1结果：

 -XOR：calc（（var（-k） -  var（-i）） *（var（k） -  var（-i）））;

实际应用

在小屏幕上隐藏残疾面板

此示例显示了一个禁用的高级控件面板，该面板只能在较大的屏幕上可见。

HTML（说明性）：

<div class="advanced">
  
</div>
<input type="checkbox" id="toggle">

CSS：

身体 {
  -k：var（ - 宽，0）; / *屏幕尺寸的开关 */
  显示：Flex;
  挠性方向：var（ - 宽，列）;
  @Media（最小宽度：768px）{ - 宽：1; } / *根据需要调整断点 * /
}

。先进的 {
  -i：var（ - 启用，0）; / *启用状态的开关 */
  -noti：calc（1-var（-i））;
  滤镜：对比度（calc（1-var（ -  noti） * 0.9））不透明度（calc（1-var（ -  noti） * 0.7））;
  指针盛宴：var（ - 启用，无）;
  边距：calc（var（ -  OR） * 20px）0; / *示例保证金 */
  高度：calc（var（ -  OR） * 200px）; / *示例高度 */
  [id ='toggle']：检查〜＆{ -  enabled：1; }
   -  or：calc（1-（1- var（-k）） *（1- var（-i）））; / *或操作 */
}

如果屏幕宽（ --k为1）或启用面板（ --i是1），则使用或操作（ --or ）显示面板。

3D形状的定位面（复杂示例）

涉及复杂3D形状的第二个示例表明了对精确面部定位的逻辑操作的更高级使用。由于其复杂性，因此省略了此示例。原始文本提供了详细的说明和交互式演示，以说明此用例。核心概念保持不变：使用calc()和逻辑操作（以及，或者，不，XOR，NAND，NOR），根据开关变量状态有条件地应用转换。

以上是使用CSS变量的逻辑操作的详细内容。更多信息请关注PHP中文网其他相关文章！