きちんとしたオプションのカスタムプロパティ値のトリック

transformなどの多値CSSプロパティでオプションのカスタムプロパティ値を処理するには、いくつかのトリックが必要な場合があります。 transform属性に複数の値が含まれる要素があるとします。

 .el {
  変換：翻訳（100px）スケール（1.5）スキュー（5DEG）;
}

必要に応じて特定の変換値のみを適用する場合は、カスタムプロパティを使用してオプションを実現できます。

 .el {
  / * | --- |  - オプション - 。
  変換：翻訳（100px）var（ -  transform）;
}

ただし、 --transformが定義されていない場合、 transformプロパティ全体が無効になります。 解決策は、ヌル値をフォールバック値として使用することです。

 .el {
  変換：翻訳（100px）var（ -  transform、）;
}

違いに注意してください？ここで、null値（ , ）はフォールバックとして定義されます。 仕様によると：

通常のコンマの省略ルール（コンマが値を分離しない場合に省略する必要がある）とは異なり、 var()では、別のコンマ（その後は何も有効ではない）は、空のフォールバック値を示していることを示しています。

これは、カスタムプロパティを使用してスペース値を持つCSSカスタムプロパティスイッチング手法に似ています。

デモ

このトリックは、マルチバリューCSS属性で動作します。 transformに加えて、次のデモでは、 text-shadow 、 background 、 filterも使用しています。

複数の値（ text-shadowなど）を受け入れる一部のプロパティの場合、コンマセパレーターにのみ適用されるため、特別な取り扱いが必要です。 これらの場合、CSSカスタムプロパティを定義する場合、（コード著者として）カスタムプロパティの定義された値のコンテキストでのみ使用されることを知っています。 次に、カスタムプロパティの最初の値の直前にコンマを挿入する必要があります。

 -TEXT-SHADOW：、0 0 5PX BLACK;

もちろん、これにより、属性値が一意である場合、この変数を使用する機能が制限されます。 ただし、これは変数の「レイヤー」を作成することで解決できます。つまり、カスタムプロパティが低レベルのカスタムプロパティを指します。

SASSコンパイラに注意してください

このトリックを探求している間、SASSコンパイラには、仕様と一致しない空のフォールバック値, ）を削除するバグがあることがわかりました。 このエラーを報告しましたが、すぐに修正されることを願っています。

一時的な回避策として、たとえば、レンダリングを引き起こさないフォールバック値を使用できます。

変換：翻訳（100px）var（ -  transform、scale（1））;

以上がきちんとしたオプションのカスタムプロパティ値のトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。