CSS変数を使用した論理操作

この記事ではcalc()関数内の算術を使用して、CSSスイッチ変数（値0または1の変数）で論理操作を実行する方法を示します。 CSSには専用の論理関数がありませんが、これらの計算は効果的なエミュレーションを提供します。

calc()を使用したCSSの論理操作

操作ではありません

スイッチ変数（ --j ）を否定することは単純です：1から減算します。

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

--jが0の場合、 --notj 1になります。 --jが1、 --notjは0です。

および操作

および操作は、両方のオペランドが真である場合にのみtrueを返します。スイッチ変数（ --kおよび--i ）の場合、乗算はこれを達成します。

 - および：calc（var（ -  k） * var（ -  i））;

これは、 --kと--i両方が1である場合にのみ1を生成します。それ以外の場合は、0です。

NAND操作（そうではありません）

ナンドはの否定であり、

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

または操作

少なくとも1つのオペランドが真である場合、または操作が真です。 De Morganの法則（ not (A or B) = (not A) and (not B) ）を使用して、次のようになります。

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

操作もありません（またはそうではありません）

または：または：

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

xor操作（排他的または）

正確に1つのオペランドが真である場合、XORは真です。変数を減算して結果を角にすると、絶対値が得られ、目的の0または1の結果が得られます。

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

実用的なアプリケーション

小さな画面に無効なパネルを隠す

この例は、より大きな画面でのみ見えるはずの無効なAdvanced Controlsパネルを示しています。

HTML（イラスト）：

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

CSS：

体 {
  -K：var（ -  wide、0）; / *画面サイズのスイッチ */
  ディスプレイ：Flex;
  Flex-Direction：var（ -  wide、column）;
  @media（min-width：768px）{ - -wide：1; } / *必要に応じてブレークポイントを調整 * /
}

。高度な {
  -i：var（ -  enabled、0）; / *有効な状態のスイッチ */
  -noti：calc（1-var（ -  i））;
  フィルター：コントラスト（calc（1-var（ -  noti） * 0.9））Opacity（calc（1-var（ -  noti） * 0.7））;
  Pointer-Events：var（ -  enabled、none）;
  マージン：calc（var（ -  or） * 20px）0; / *マージンの例 */
  高さ：calc（var（ -  or） * 200px）; / * example height */
  [id = 'トグル']：checked〜＆{ -  enabled：1; }
   -  or：calc（1-（1-var（ -  k）） *（1-var（ -  i）））; / *または操作 */
}

これにより、OR操作（ --or ）を使用して、画面が広い場合（ --kが1）、パネルが有効になっている場合（ --iは1）、パネルが表示されます。

3D形状の位置決め面（複雑な例）

複雑な3D形状を含む2番目の例は、正確な顔のポジショニングのための論理操作のより高度な使用を示しています。その複雑さのため、この例は簡潔に省略されています。元のテキストは、このユースケースを示す詳細な説明とインタラクティブなデモを提供します。コアの概念は同じままです。Calc calc()と論理操作（および、Xor、nand、nor）を使用して、スイッチ変数状態に基づいて条件付き変換を適用します。

以上がCSS変数を使用した論理操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。