バニラCSSでSassの@functionや@mixin使えるようになる（かも）

CSSでもSassの@functionや@mixinを使えるようにしようぜという議論がGitHubでされている。

/* Functions */
@function --at-breakpoints(
  --s: 1em;
  --m: 1em + 0.5vw;
  --l: 1.2em + 1vw;
) {
  @container (inline-size < 20em) {
    @return calc(var(--s));
  }
  @container (20em < inline-size < 50em) {
    @return calc(var(--m));
  }
  @container (50em < inline-size) {
    @return calc(var(--l));
  }
}

/* Mixins */
@mixin --center-content {
  display: grid;
  place-content: center;
}

NES.cssでSassの@functionや@mixinを使っていたが、CSSはただでさえ気合を入れて設計しないと破綻するのにレベル感がバラバラなチーム開発ではちゃんと運用できる自信がない。

追記:2024-08-05

7月19日にCSS Functions and Mixins Moduleの草案が公開され、@functionの仕様が検討されている。なお@mixinは現時点ではない。

functions

@function --circle-area(--r) {
  result: calc(pi * var(--r2));
  --r2: var(--r) * var(--r);
}

.element {
  /** --rは引数、1.5remはフォールバック */
  inline-size: --circle-HTMLTextAreaElement(--r, 1.5rem);
}