よく使う便利なSCSSの@functionまとめ

はじめに

SCSSの @function は、値のルールを揃えるのにとても便利です。特に、余白・フォントサイズ・色の調整を毎回手で書いていると、画面ごとに少しずつズレが出やすくなります。

この記事では、実務で使いやすい「独自function」を6つに絞って紹介します。

1. rem() 変換function

SCSS

SCSS
@use "sass:math";

@function rem($px, $base: 16) {
  @return math.div($px, $base) * 1rem;
}

.card {
  padding: rem(20);
  border-radius: rem(12);
}

CSS出力

CSS
.card {
  padding: 1.25rem;
  border-radius: 0.75rem;
}

px指定をremへ揃える定番です。ベースフォントサイズを変えたときも全体の整合が取りやすくなります。

2. fluid-size() 可変フォントfunction

SCSS

SCSS
@function fluid-size($min, $vw, $max) {
  @return clamp(#{$min}px, #{$vw}vw, #{$max}px);
}

.page-title {
  font-size: fluid-size(24, 3.4, 40);
}

CSS出力

CSS
.page-title {
  font-size: clamp(24px, 3.4vw, 40px);
}

タイトルサイズを画面幅に追従させたいときに便利です。clampの式を毎回書かずに済みます。

3. tracking() 文字間function

SCSS

SCSS
@use "sass:math";

@function tracking($value) {
  @return math.div($value, 1000) * 1em;
}

.heading {
  letter-spacing: tracking(40);
}

CSS出力

CSS
.heading {
  letter-spacing: 0.04em;
}

デザインデータの単位を扱いやすくするfunctionです。文字間ルールを統一しやすくなります。

4. radius() 角丸トークンfunction

SCSS

SCSS
$radius-scale: (
  sm: 6px,
  md: 10px,
  lg: 14px
);

@function radius($key) {
  @return map-get($radius-scale, $key);
}

.panel {
  border-radius: radius(md);
}

CSS出力

CSS
.panel {
  border-radius: 10px;
}

角丸のルールを固定したいときに使います。値のバラつきを減らし、UI全体の統一感を保ちやすくなります。

5. z() z-index管理function

SCSS

SCSS
$z-map: (
  dropdown: 100,
  sticky: 200,
  modal: 1000,
  toast: 1100
);

@function z($layer) {
  @return map-get($z-map, $layer);
}

.modal {
  z-index: z(modal);
}

CSS出力

CSS
.modal {
  z-index: 1000;
}

z-indexのマジックナンバーを減らせます。重なり順の設計をチームで共有しやすくなります。

6. overlay-alpha() 透過色function

SCSS

SCSS
@function overlay-alpha($alpha) {
  @return rgba(15, 23, 42, $alpha);
}

.backdrop {
  background: overlay-alpha(0.56);
}

CSS出力

CSS
.backdrop {
  background: rgba(15, 23, 42, 0.56);
}

オーバーレイ色を統一したいときに便利です。透明度だけ変えて使えるので、モーダルやドロワーで再利用しやすいです。

注意点

独自functionは増やしすぎると逆に追いづらくなります。まずは登場回数が多い値から導入し、使われていない関数は整理する運用がおすすめです。

また、戻り値が分かりにくい名前は避け、用途が想像できる命名にすると保守しやすくなります。

まとめ

独自functionは、値の設計を揃えるための実務的な手段です。今回の6パターンだけでも、日常的なSCSS実装の迷いをかなり減らせます。

小さく導入して、効果が高いものだけをチームルールに残していく進め方が安定します。

ポイント

  • 独自functionは「値のルール固定」に効く
  • 余白・サイズ・色・重なり順の統一で効果が出やすい
  • 少数精鋭で管理したほうが長期運用しやすい

参考リンク

read next