azukiazusa.dev
戻る
azukiazusa

azukiazusa

CSS で関数を定義できるようになる

Chrome Canary で CSS 関数のプロトタイプが実装されました。CSS Functions and Mixins Module という仕様に基づいて実装されており、@function ルールを使用して開発者が関数を定義できるようになります。

azukiazusa

azukiazusa

例として符号を反転する --negate 関数を定義すると以下のようになります。

@function --negate(--value) {
	result: calc(-1 * var(--value));
}
azukiazusa

azukiazusa

この関数は以下のように使用できます。

:root {
  padding: --negate(1px); /* = -1px */
}